html5-canvas => Ruta (solo sintaxis)

Sintaxis

context.beginPath ()
context.moveTo (startX, startY)
context.lineTo (endX, endY)
context.arc (centerX, centerY, radio, startingRadianAngle, endingRadianAngle)
context.quadraticCurveTo (controlX, controlY, endX, endY)
context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, endY)
context.arcTo (pointX1, pointY1, pointX2, pointY2, radio)
context.rect (leftX, topY, width, height);
context.closePath ()

Resumen de los comandos básicos de trazado de trayectos: líneas y curvas.

==================

TODO: vincule cada uno de los comandos de dibujo a continuación a sus ejemplos individuales. No sé cómo hacerlo, ya que los enlaces a los ejemplos individuales apuntan hacia la carpeta "borrador".

TODO: Agregar ejemplos para estos comandos de "acción" de ruta: trazo (), relleno (), clip ()

==================

Camino

Una ruta define un conjunto de líneas y curvas que se pueden dibujar visiblemente en el lienzo.

Un trazado no se dibuja automáticamente en el lienzo. Pero las líneas y curvas del camino se pueden dibujar en el lienzo utilizando un trazo con estilo. Y la forma creada por las líneas y curvas también se puede rellenar con un relleno estilizable.

Las rutas tienen usos más allá del dibujo en el lienzo:

Prueba de golpe si una coordenada x, y está dentro de la forma de la trayectoria.
Definición de una región de recorte donde solo serán visibles los dibujos dentro de la región de recorte. Cualquier dibujo fuera de la región de recorte no se dibujará (== transparente), similar al desbordamiento de CSS.

Los comandos básicos de dibujo de ruta son:

beginPath
mover a
lineTo
arco
cuadrática
bezierCurveTo
arco a
rect
closePath

Descripción de los comandos básicos de dibujo:

beginPath

context.beginPath()

Comienza a ensamblar un nuevo conjunto de comandos de ruta y también descarta cualquier ruta previamente ensamblada.

El descarte es un punto importante ya menudo pasado por alto. Si no comienza una nueva ruta, cualquier comando de ruta emitido previamente se volverá a dibujar.

También mueve el "lápiz" del dibujo al origen superior izquierdo del lienzo (== coordenada [0,0]).

mover a

context.moveTo(startX, startY)

Mueve la ubicación actual del lápiz a la coordenada [startX, startY].

Por defecto, todos los dibujos de ruta están conectados entre sí. Entonces, el punto final de una línea o curva es el punto de inicio de la siguiente línea o curva. Esto puede hacer que se dibuje una línea inesperada que conecta dos dibujos adyacentes. El comando context.moveTo básicamente "toma el lápiz del dibujo" y lo coloca en una nueva coordenada para que no se dibuje la línea de conexión automática.

lineTo

context.lineTo(endX, endY)

Dibuja un segmento de línea desde la ubicación actual del lápiz para coordinar [endX, endY]

Puede ensamblar varios comandos .lineTo para dibujar una polilínea. Por ejemplo, puedes ensamblar 3 segmentos de línea para formar un triángulo.

arco

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

Dibuja un arco circular dado el punto central, el radio y los ángulos de inicio y finalización. Los ángulos se expresan como radianes. Para convertir grados en radianes, puede utilizar esta fórmula: radians = degrees * Math.PI / 180; .

El ángulo 0 mira directamente hacia la derecha desde el centro del arco. Para dibujar un círculo completo, puede hacer endingAngle = startingAngle + 360 grados (360 grados == Math.PI 2): `context.arc (10,10,20,0, Math.PI 2);

Por defecto, el arco se dibuja en el sentido de las agujas del reloj. Un parámetro opcional [true | false] indica que el arco se context.arc(10,10,20,0,Math.PI*2,true) sentido contrario a las agujas del reloj: context.arc(10,10,20,0,Math.PI*2,true)

cuadrática

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Dibuja una curva cuadrática que comienza en la ubicación actual de la pluma hasta una coordenada final dada. Otra coordenada de control dada determina la forma (curvatura) de la curva.

bezierCurveTo

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Dibuja una curva de Bézier cúbica que comienza en la ubicación de la pluma actual hasta una coordenada final dada. Otras 2 coordenadas de control dadas determinan la forma (curvatura) de la curva.

arco a

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Dibuja un arco circular con un radio dado. El arco se dibuja en el sentido de las agujas del reloj dentro de la cuña formada por la ubicación actual del lápiz y se le asignan dos puntos: Punto1 y Punto2.

Una línea que conecta la ubicación actual del lápiz y el inicio del arco se dibuja automáticamente antes del arco.

rect

context.rect(leftX, topY, width, height)

Dibuja un rectángulo dado una esquina superior izquierda y un ancho y alto.

El context.rect es un comando de dibujo único porque agrega rectángulos desconectados. Estos rectángulos desconectados no se conectan automáticamente por líneas.

closePath

context.closePath()

Dibuja una línea desde la ubicación actual del lápiz hasta la coordenada de la ruta de inicio.

Por ejemplo, si dibuja 2 líneas que forman 2 patas de un triángulo, closePath "cerrará" el triángulo dibujando la tercera pata del triángulo desde el punto final de la 2a pata hasta el punto inicial de la primera pata.

El nombre de este comando a menudo hace que sea mal entendido. context.closePath NO es un delimitador final para context.beginPath . Nuevamente, el comando closePath dibuja una línea, no "cierra" una beginPath .

lineTo (un comando de ruta)

context.lineTo(endX, endY)

Dibuja un segmento de línea desde la ubicación actual del lápiz para coordinar [endX, endY]

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=20;
    var endX=125;
    var endY=20;

    // Draw a single line segment drawn using "moveTo" and "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Puede ensamblar varios comandos .lineTo para dibujar una polilínea. Por ejemplo, puedes ensamblar 3 segmentos de línea para formar un triángulo.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=20;
    var rightVertexX=75;
    var rightVertexY=70;
    var leftVertexX=25;
    var leftVertexY=70;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);
    ctx.lineTo(topVertexX,topVertexY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arco (un comando de ruta)

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

El ángulo 0 mira directamente hacia la derecha desde el centro del arco.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=Math.PI*2*;  // start at 90 degrees == centerY+radius
    var endingRadianAngle=Math.PI*2*.75;  // end at 270 degrees (==PI*2*.75 in radians)

    // A partial circle (i.e. arc) drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Para dibujar un círculo completo, puede hacer endingAngle = startingAngle + 360 grados (360 grados == Math.PI2).

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=0;       // start at 0 degrees
    var endingRadianAngle=Math.PI*2; // end at 360 degrees (==PI*2 in radians)

    // A complete circle drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

quadraticCurveTo (un comando de ruta)

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

Dibuja una curva cuadrática que comienza en la ubicación actual de la pluma hasta una coordenada final dada. Otra coordenada de control dada determina la forma (curvatura) de la curva.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=70;
    var controlX=75;
    var controlY=25;
    var endX=125;
    var endY=70;

    // A quadratic curve drawn using "moveTo" and "quadraticCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.quadraticCurveTo(controlX,controlY,endX,endY);
    ctx.stroke();


}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

bezierCurveTo (un comando de ruta)

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

Dibuja una curva de Bézier cúbica que comienza en la ubicación de la pluma actual hasta una coordenada final dada. Otras 2 coordenadas de control dadas determinan la forma (curvatura) de la curva.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=50;
    var controlX1=75;
    var controlY1=10;
    var controlX2=75;
    var controlY2=90;
    var endX=125;
    var endY=50;      
    
    // A cubic bezier curve drawn using "moveTo" and "bezierCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arcTo (un comando de ruta)

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

Una línea que conecta la ubicación actual del lápiz y el inicio del arco se dibuja automáticamente antes del arco.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var pointX0=25;
    var pointY0=80;
    var pointX1=75;
    var pointY1=0;
    var pointX2=125;
    var pointY2=80;
    var radius=25;

    // A circular arc drawn using the "arcTo" command. The line is automatically drawn.
    ctx.beginPath();
    ctx.moveTo(pointX0,pointY0);
    ctx.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

rect (un comando de ruta)

context.rect(leftX, topY, width, height)

Dibuja un rectángulo dado una esquina superior izquierda y un ancho y alto.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // A rectangle drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

El context.rect es un comando de dibujo único porque agrega rectángulos desconectados.

Estos rectángulos desconectados no se conectan automáticamente por líneas.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // Multiple rectangles drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.rect(leftX+50, topY+20, width, height);
    ctx.rect(leftX+100, topY+40, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

closePath (un comando de ruta)

context.closePath()

Dibuja una línea desde la ubicación actual del lápiz hasta la coordenada de la ruta de inicio.

Por ejemplo, si dibuja 2 líneas que forman 2 patas de un triángulo, closePath "cerrará" el triángulo dibujando la tercera pata del triángulo desde el punto final de la 2a pata hasta el punto inicial de la primera pata.

¡Un error de explicación!

El nombre de este comando a menudo hace que sea mal entendido.

context.closePath NO es un delimitador final para context.beginPath .

Nuevamente, el comando closePath dibuja una línea, no "cierra" una beginPath.

Este ejemplo dibuja 2 patas de un triángulo y usa closePath para completar (¿cerrar?) El triángulo dibujando la tercera pata. Lo que closePath realmente está haciendo es dibujar una línea desde el punto final del segundo tramo hasta el punto inicial del primer tramo.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=50;
    var rightVertexX=75;
    var rightVertexY=75;
    var leftVertexX=25;
    var leftVertexY=75;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);

    // closePath draws the 3rd leg of the triangle
    ctx.closePath()

    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

beginPath (un comando de ruta)

context.beginPath()

Comienza a ensamblar un nuevo conjunto de comandos de ruta y también descarta cualquier ruta previamente ensamblada.

También mueve el "lápiz" del dibujo al origen superior izquierdo del lienzo (== coordenada [0,0]).

Aunque es opcional, SIEMPRE debe iniciar una ruta con beginPath

El descarte es un punto importante ya menudo pasado por alto. Si no comienza una nueva ruta con beginPath , cualquier comando de ruta emitido previamente se volverá a dibujar.

Estas dos demostraciones intentan dibujar una "X" con un trazo rojo y un trazo azul.

Esta primera demostración utiliza correctamente beginPath para iniciar su segundo trazo rojo. El resultado es que la "X" tiene correctamente un trazo rojo y uno azul.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    ctx.beginPath();        // Important to begin a new path! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

Esta segunda demostración deja incorrectamente a beginPath en el segundo trazo. El resultado es que la "X" tiene incorrectamente ambos trazos rojos.

El segundo stroke() es dibuja el segundo trazo rojo.

Pero sin un segundo beginPath , ese mismo segundo stroke() también vuelve a dibujar incorrectamente el primer trazo.

Dado que el segundo stroke() ahora tiene un estilo rojo, el primer trazo azul se sobrescribe con un trazo rojo de color incorrecto.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    // Note: The necessary 'beginPath' is missing! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

lineCap (un atributo de estilo de ruta)

context.lineCap=capStyle  // butt (default), round, square

Establece el estilo de tapa de los puntos de inicio de línea y los puntos finales.

Butt , el estilo predeterminado de lineCap, muestra mayúsculas cuadradas que no se extienden más allá de los puntos de inicio y final de la línea.
redondeado , muestra mayúsculas redondeadas que se extienden más allá de los puntos inicial y final de la línea.
cuadrado , muestra casquillos cuadrados que se extienden más allá de los puntos inicial y final de la línea.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineCap default: butt
    ctx.lineCap='butt';  
    drawLine(50,40,200,40);

    // lineCap: round
    ctx.lineCap='round';  
    drawLine(50,70,200,70);

    // lineCap: square
    ctx.lineCap='square';  
    drawLine(50,100,200,100);

    // utility function to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

    // For demo only,
    // Rulers to show which lineCaps extend beyond endpoints
    ctx.lineWidth=1;
    ctx.strokeStyle='red';
    drawLine(50,20,50,120);
    drawLine(200,20,200,120);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

lineJoin (un atributo de estilo de ruta)

context.lineJoin=joinStyle  // miter (default), round, bevel

Establece el estilo utilizado para conectar los segmentos de línea adyacentes.

Mitre , el valor predeterminado, une segmentos de línea con una unión afilada.
redondear , une segmentos de línea con una junta redondeada.
Bisel , une segmentos de línea con una junta embotada.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineJoin: miter (default)
    ctx.lineJoin='miter';
    drawPolyline(50,30);

    // lineJoin: round
    ctx.lineJoin='round';
    drawPolyline(50,80);

    // lineJoin: bevel
    ctx.lineJoin='bevel';
    drawPolyline(50,130);

    // utility to draw polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

strokeStyle (un atributo de estilo de ruta)

context.strokeStyle=color

Establece el color que se utilizará para trazar el contorno de la ruta actual.

Estas son opciones de color (estas deben ser citadas):

Un CSS con nombre de color , por ejemplo context.strokeStyle='red'
Un color hexadecimal , por ejemplo context.strokeStyle='#FF0000'
Un color RGB , por ejemplo context.strokeStyle='rgb(red,green,blue)' donde rojo, verde y azul son números enteros 0-255 que indican la intensidad de cada color componente.
Un color HSL , por ejemplo context.strokeStyle='hsl(hue,saturation,lightness)' donde el tono es un número entero 0-360 en la rueda de color y la saturación y la luminosidad son porcentajes (0-100%) que indican la fuerza de cada componente .
Un color HSLA , por ejemplo context.strokeStyle='hsl(hue,saturation,lightness,alpha)' donde el tono es un número entero 0-360 en la rueda de color y la saturación y la luminosidad son porcentajes (0-100%) que indican la fuerza de cada componente y alfa es un valor decimal de 0.00-1.00 que indica la opacidad.

También puede especificar estas opciones de color (estas opciones son objetos creados por el contexto):

Un degradado lineal que es un objeto de degradado lineal creado con context.createLinearGradient
Un degradado radial que es un objeto de degradado radial creado con context.createRadialGradient
Un patrón que es un objeto de patrón creado con context.createPattern

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.strokeStyle='red';
    drawLine(50,40,250,40);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(75,75,175,75);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    drawLine(50,75,250,75);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,110,15,100,110,45);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    ctx.lineWidth=20;
    drawLine(50,110,250,110);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.strokeStyle=pattern;
        drawLine(50,150,250,150);
    }
    patternImage.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';

    // for demo only, draw labels by each stroke
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',265,40);
    ctx.fillText('Linear Gradient color',265,75);
    ctx.fillText('Radial Gradient color',265,110);
    ctx.fillText('Pattern color',265,150);

    // utility to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=425 height=200></canvas>
</body>
</html>

fillStyle (un atributo de estilo de ruta)

context.fillStyle=color

Establece el color que se utilizará para rellenar el interior de la ruta actual.

Estas son opciones de color (estas deben ser citadas):

Un CSS con nombre de color , por ejemplo context.fillStyle='red'
Un color hexadecimal , por ejemplo context.fillStyle='#FF0000'
Un color RGB , por ejemplo context.fillStyle='rgb(red,green,blue)' donde rojo, verde y azul son números enteros 0-255 que indican la intensidad de cada color del componente.
Un color HSL , por ejemplo context.fillStyle='hsl(hue,saturation,lightness)' donde el tono es un número entero 0-360 en la rueda de color y la saturación y la luminosidad son porcentajes (0-100%) que indican la fuerza de cada componente .
Un color HSLA , por ejemplo context.fillStyle='hsl(hue,saturation,lightness,alpha)' donde el tono es un número entero 0-360 en la rueda de color y la saturación y la luminosidad son porcentajes (0-100%) que indican la fuerza de cada componente y alfa es un valor decimal de 0.00-1.00 que indica la opacidad.

También puede especificar estas opciones de color (estas opciones son objetos creados por el contexto):

Un degradado lineal que es un objeto de degradado lineal creado con context.createLinearGradient

Un degradado radial que es un objeto de degradado radial creado con context.createRadialGradient

Un patrón que es un objeto de patrón creado con context.createPattern

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.fillStyle='red';
    ctx.fillRect(50,50,100,50);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(225,50,300,50);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(200,50,100,50);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,175,5,100,175,30);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(50,150,100,50);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.fillStyle=pattern;
        ctx.fillRect(200,150,100,50);
    }
    patternImage.src='http://i.stack.imgur.com/ixrWe.png';

    // for demo only, draw labels by each stroke
    ctx.fillStyle='black';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',100,40);
    ctx.fillText('Linear Gradient color',250,40);
    ctx.fillText('Radial Gradient color',100,140);
    ctx.fillText('Pattern color',250,140);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

lineWidth (un atributo de estilo de ruta)

context.lineWidth=lineWidth

Establece el ancho de la línea que trazará el contorno del trazado.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.lineWidth=1;
    drawPolyline(50,50);

    ctx.lineWidth=5;
    drawPolyline(50,100);

    ctx.lineWidth=10;
    drawPolyline(50,150);


    // utility to draw a polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (atributos de estilo de ruta)

shadowColor = color        // CSS color
shadowBlur =  width        // integer blur width
shadowOffsetX = distance   // shadow is moved horizontally by this offset
shadowOffsetY = distance   // shadow is moved vertically by this offset

Este conjunto de atributos agregará una sombra alrededor de una ruta.

Tanto los caminos rellenos como los trazados pueden tener una sombra.

La sombra es más oscura (opaca) en el perímetro de la trayectoria y se vuelve gradualmente más clara a medida que se aleja del perímetro de la trayectoria.

shadowColor indica qué color CSS se usará para crear la sombra.
shadowBlur es la distancia sobre la cual la sombra se extiende hacia afuera desde el camino.
shadowOffsetX es una distancia por la cual la sombra se desplaza horizontalmente alejándose del camino. Una distancia positiva mueve la sombra hacia la derecha, una distancia negativa mueve la sombra hacia la izquierda.
shadowOffsetY es una distancia por la cual la sombra se desplaza verticalmente alejándose del camino. Una distancia positiva mueve la sombra hacia abajo, una distancia negativa mueve la sombra hacia arriba.

Acerca de shadowOffsetX y shadowOffsetY

Es importante tener en cuenta que toda la sombra se desplaza en su totalidad . Esto hará que parte de la sombra se desplace por debajo de los caminos rellenos y, por lo tanto, parte de la sombra no será visible.

Sobre trazos sombreados

Al sombrear un trazo, tanto el interior como el exterior del trazo están sombreados. La sombra es más oscura en el trazo y se aclara cuando la sombra se extiende hacia afuera en ambas direcciones desde el trazo.

Desactivar el sombreado cuando haya terminado

Después de dibujar sus sombras, es posible que desee desactivar el sombreado para dibujar más caminos. Para desactivar el sombreado, configure el shadowColor la shadowColor en transparente.

context.shadowColor = 'rgba(0,0,0,0)';

Consideraciones de rendimiento

Las sombras (como los gradientes) requieren cálculos extensos y, por lo tanto, debe usar sombras con moderación.

Tenga especial cuidado al animar, porque dibujar sombras muchas veces por segundo tendrá un gran impacto en el rendimiento. Una solución alternativa si necesita animar rutas sombreadas es crear previamente la ruta sombreada en un segundo "lienzo de sombras". El lienzo de la sombra es un lienzo normal que se crea en la memoria con document.createElement , no se agrega al DOM (solo es un lienzo provisional). Luego dibuja el lienzo de sombras en el lienzo principal. Esto es mucho más rápido porque los cálculos de sombra no necesitan realizarse muchas veces por segundo. Todo lo que estás haciendo es copiar un lienzo creado previamente en tu lienzo visible.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // shadowed stroke
    ctx.shadowColor='black';
    ctx.shadowBlur=6;
    ctx.strokeStyle='red';
    ctx.strokeRect(50,50,100,50);
    // darken the shadow by stroking a second time
    ctx.strokeRect(50,50,100,50);

    // shadowed fill
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.fillStyle='red';
    ctx.fillRect(225,50,100,50);
    // darken the shadow by stroking a second time
    ctx.fillRect(225,50,100,50);

    // the shadow offset rightward and downward 
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.fillStyle='red';
    ctx.fillRect(50,175,100,50);

    // a wider blur (==extends further from the path)
    ctx.shadowColor='black';
    ctx.shadowBlur=35;
    ctx.fillStyle='red';
    ctx.fillRect(225,175,100,50);

    // always clean up! Turn off shadowing
    ctx.shadowColor='rgba(0,0,0,0)';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

createLinearGradient (crea un objeto de estilo de ruta)

var gradient = createLinearGradient( startX, startY, endX, endY )
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Crea un degradado lineal reutilizable (objeto).

El objeto se puede asignar a cualquier strokeStyle y / o fillStyle .

Luego, el trazo () o el relleno () colorearán la ruta con los colores degradados del objeto.

Crear un objeto degradado es un proceso de 2 pasos:

Crea el objeto degradado en sí. Durante la creación, se define una línea en el lienzo donde el gradiente comenzará y terminará. El objeto de gradiente se crea con var gradient = context.createLinearGradient .
Luego, agregue 2 (o más) colores que conforman el degradado. Esto se hace agregando múltiples paradas de color al objeto de gradient.addColorStop con gradient.addColorStop .

Argumentos:

startX, startY es la coordenada del lienzo donde comienza el degradado. En el punto de inicio (y antes), el lienzo es sólidamente el color de la gradientPercentPosition más baja.
endX, endY es la coordenada del lienzo donde termina el degradado. En el punto final (y después), el lienzo es sólidamente el color de gradientPercentPosition más alto.
gradientPercentPosition es un número flotante entre 0.00 y 1.00 asignado a una parada de color. Básicamente es un punto porcentual a lo largo de la línea donde se aplica esta parada de color en particular.
- El gradiente comienza en el porcentaje 0.00 que es [startX, startY] en el lienzo.
- El gradiente termina en el porcentaje 1.00 que es [endX, endY] en el lienzo.
- Nota técnica: el término "porcentaje" no es técnicamente correcto ya que los valores van de 0.00 a 1.00 en lugar de 0% a 100%.
CssColor es un color CSS asignado a esta parada de color en particular.

El objeto de degradado es un objeto que puede usar (y reutilizar) para hacer que los trazos y rellenos de su trayectoria se vuelvan de color degradado.

Nota al margen: el objeto de degradado no es interno al elemento Canvas ni a su Contexto. Es un objeto JavaScript separado y reutilizable que puede asignar a cualquier ruta que desee. Incluso puede usar este objeto para colorear una ruta en un elemento de lienzo diferente (!)

Las paradas de color son puntos de referencia (porcentaje) a lo largo de la línea de degradado. En cada punto de parada de color, el degradado está completamente coloreado (== opacamente) con su color asignado. Los puntos intermedios a lo largo de la línea de gradiente entre las paradas de color se colorean como gradientes del color anterior y anterior.

¡Indirecta importante sobre gradientes de la lona!

Cuando creas un objeto de degradado, todo el lienzo se rellena "invisiblemente" con ese degradado.

Cuando traza stroke() o fill() un camino, se revela el gradiente invisible, pero solo se revela sobre ese camino que se está trazando o rellenando.

Si creas un degradado lineal de rojo a magenta como este:

 // create a linearGradient
 var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
 gradient.addColorStop(0,'red');
 gradient.addColorStop(1,'magenta');
 ctx.fillStyle=gradient;

Entonces Canvas "invisiblemente" verá tu creación de gradiente de esta manera:

Pero hasta que stroke() o fill() con el degradado, no verá ninguno del degradado en el Lienzo.
Finalmente, si traza o rellena un trazado utilizando el degradado, el degradado "invisible" se hace visible en el Lienzo ... pero solo donde se dibuja el trazado.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // Create a linearGradient
    // Note: Nothing visually appears during this process
    var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'magenta');

    // Create a polyline path 
    // Note: Nothing visually appears during this process
    var x=20;
    var y=40;
    ctx.lineCap='round';
    ctx.lineJoin='round';
    ctx.lineWidth=15;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+30,y+50);
    ctx.lineTo(x+60,y);
    ctx.lineTo(x+90,y+50);
    ctx.lineTo(x+120,y);
    ctx.lineTo(x+150,y+50);
    ctx.lineTo(x+180,y);
    ctx.lineTo(x+210,y+50);
    ctx.lineTo(x+240,y);
    ctx.lineTo(x+270,y+50);
    ctx.lineTo(x+300,y);
    ctx.lineTo(x+330,y+50);
    ctx.lineTo(x+360,y);

    // Set the stroke style to be the gradient
    // Note: Nothing visually appears during this process
    ctx.strokeStyle=gradient;
    
    // stroke the path
    // FINALLY! The gradient-stroked path is visible on the canvas
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=150></canvas>
</body>
</html>

createRadialGradient (crea un objeto de estilo de ruta)

var gradient = createRadialGradient( 
      centerX1, centerY1, radius1,     // this is the "display' circle
      centerX2, centerY2, radius2      // this is the "light casting" circle
)
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

Crea un degradado radial reutilizable (objeto). El objeto de degradado es un objeto que puede usar (y reutilizar) para hacer que los trazos y rellenos de su trayectoria se vuelvan de color degradado.

Acerca de...

El degradado radial de Canvas es extremadamente diferente de los degradados radiales tradicionales.

La definición "oficial" (¡casi indescifrable!) Del degradado radial de Canvas se encuentra al final de esta publicación. ¡No lo mires si tienes una disposición débil!

En términos (casi comprensibles):

El degradado radial tiene 2 círculos: un círculo de "lanzamiento" y un círculo de "visualización".
El círculo de lanzamiento arroja luz en el círculo de visualización.
Esa luz es el gradiente.
La forma de esa luz de gradiente está determinada por el tamaño relativo y la posición de ambos círculos.

Crear un objeto degradado es un proceso de 2 pasos:

Crea el objeto degradado en sí. Durante la creación, se define una línea en el lienzo donde el gradiente comenzará y terminará. El objeto de gradiente se crea con var gradient = context.radialLinearGradient .
Luego, agregue 2 (o más) colores que conforman el degradado. Esto se hace agregando múltiples paradas de color al objeto de gradient.addColorStop con gradient.addColorStop .

Argumentos:

centerX1, centerY1, radius1 define un primer círculo donde se mostrará el degradado.
centerX2, centroY2, radio2 define un segundo círculo que está proyectando luz de gradiente en el primer círculo.
gradientPercentPosition es un número flotante entre 0.00 y 1.00 asignado a una parada de color. Básicamente es un porcentaje de punto de referencia que define dónde se aplica esta parada de color en particular a lo largo del degradado.
- El gradiente comienza en porcentaje de 0.00.
- El gradiente termina en porcentaje 1.00.
- Nota técnica: el término "porcentaje" no es técnicamente correcto ya que los valores van de 0.00 a 1.00 en lugar de 0% a 100%.
CssColor es un color CSS asignado a esta parada de color en particular.

¡Indirecta importante sobre gradientes de la lona!

Cuando creas un objeto de degradado, todo el degradado radial se "invisiblemente" se proyecta sobre el lienzo.

Cuando traza stroke() o fill() un camino, se revela el gradiente invisible, pero solo se revela sobre ese camino que se está trazando o rellenando.

Si creas un degradado radial de verde a rojo como este:

 // create a radialGradient
 var x1=150;
 var y1=150;
 var x2=280;
 var y2=150;
 var r1=100;
 var r2=120;
 var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
 gradient.addColorStop(0,'red');
 gradient.addColorStop(1,'green');
 ctx.fillStyle=gradient;

Entonces Canvas "invisiblemente" verá tu creación de gradiente de esta manera:

Pero hasta que stroke() o fill() con el degradado, no verá ninguno del degradado en el Lienzo.
Finalmente, si traza o rellena un trazado utilizando el degradado, el degradado "invisible" se hace visible en el Lienzo ... pero solo donde se dibuja el trazado.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; padding:10px; }
    #canvas{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // canvas related vars
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    
    // create a radial gradient
    var x1=150;
    var y1=175;
    var x2=350;
    var y2=175;
    var r1=100;
    var r2=40;
    x2=x1;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;

    // fill a path with the gradient
    ctx.beginPath();
    ctx.moveTo(150,0);
    ctx.lineTo(300,150);
    ctx.lineTo(150,325);
    ctx.lineTo(0,150);
    ctx.lineTo(150,0);
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=325></canvas>
</body>
</html>

Los detalles oficiales de miedo

¿Quién decide lo que hace `createRadialGradient?

El W3C emite las especificaciones oficiales recomendadas que los navegadores utilizan para construir el elemento Canvas Html5.

La especificación W3C para createRadialGradient lee crípticamente de la siguiente manera:

¿ createRadialGradient crea createRadialGradient

createRadialGradient ... crea efectivamente un cono, tocado por los dos círculos definidos en la creación del degradado, con la parte del cono antes del círculo inicial (0.0) utilizando el color del primer desplazamiento, la parte del cono después del círculo final (1.0) usando el color del último desplazamiento y las áreas fuera del cono que no se han tocado con el degradado (negro transparente).

¿Cómo funciona internamente?

El createRadialGradient(x0, y0, r0, x1, y1, r1) toma seis argumentos, los primeros tres representan el círculo inicial con origen (x0, y0) y radio r0, y los últimos tres representan el círculo final con origen (x1 , y1) y radio r1. Los valores están en unidades de espacio de coordenadas. Si cualquiera de r0 o r1 son negativos, se debe lanzar una excepción IndexSizeError. De lo contrario, el método debe devolver un CanvasGradient radial inicializado con los dos círculos especificados.
Los gradientes radiales deben representarse siguiendo estos pasos:
Si x0 = x1 e y0 = y1 y r0 = r1, entonces el gradiente radial no debe pintar nada. Abortar estos pasos.
Sea x (ω) = (x1-x0) ω + x0; Sea y (ω) = (y1-y0) ω + y0; Sea r (ω) = (r1-r0) ω + r0 Sea el color en ω el color en esa posición en el degradado (con los colores provenientes de la interpolación y extrapolación descritos anteriormente).
Para todos los valores de ω donde r (ω)> 0, comenzando con el valor de ω más cercano al infinito positivo y terminando con el valor de ω más cercano al infinito negativo, dibuje la circunferencia del círculo con el radio r (ω) en la posición ( x (ω), y (ω)), con el color en, pero solo pintando en las partes del lienzo que aún no han sido pintadas por círculos anteriores en este paso para esta representación del degradado.

createPattern (crea un objeto de estilo de ruta)

var pattern = createPattern(imageObject,repeat)

Crea un patrón reutilizable (objeto).

El objeto se puede asignar a cualquier strokeStyle y / o fillStyle .

Luego, trazar () o rellenar () pintará la ruta con el patrón del objeto.

Argumentos:

imageObject es una imagen que se usará como patrón. La fuente de la imagen puede ser:
- HTMLImageElement --- un elemento img o una nueva imagen (),
- HTMLCanvasElement --- un elemento canvas,
- HTMLVideoElement --- un elemento de video (tomará el cuadro de video actual)
- ImageBitmap,
- Gota.
la repetición determina cómo se repetirá el imageObject en el lienzo (como en un fondo CSS). Este argumento debe estar delimitado por comillas y los valores válidos son:
- "repetir" --- el patrón llenará horizontal y verticalmente el lienzo
- "repeat-x" --- el patrón solo se repetirá horizontalmente (1 fila horizontal)
- "repetir-y" --- el patrón solo se repetirá verticalmente (1 fila vertical)
- "no repetir" --- el patrón aparece solo una vez (arriba a la izquierda)

El objeto de patrón es un objeto que puede usar (y reutilizar) para hacer que los trazos y rellenos de su ruta se conviertan en patrones.

Nota al margen: el objeto de patrón no es interno al elemento Canvas ni a su contexto. Es un objeto JavaScript separado y reutilizable que puede asignar a cualquier ruta que desee. Incluso puede usar este objeto para aplicar un patrón a una ruta en un elemento de lienzo diferente (!)

Importante pista sobre los patrones de lienzo!

Cuando creas un objeto de patrón, todo el lienzo se rellena "invisiblemente" con ese patrón (sujeto al argumento de repeat ).

Cuando traza stroke() o fill() un camino, se revela el patrón invisible, pero solo se revela sobre ese camino que se está trazando o rellenando.

Comience con una imagen que desee utilizar como patrón. Importante (!): Asegúrese de que su imagen se haya cargado completamente (usando patternimage.onload ) antes de intentar usarla para crear su patrón.

Usted crea un patrón como este:

 // create a pattern
 var pattern = ctx.createPattern(patternImage,'repeat');
 ctx.fillStyle=pattern;

Entonces Canvas "invisiblemente" verá la creación de tu patrón de esta manera:

Pero hasta que stroke() o fill() con el patrón, no verá ninguno del patrón en el lienzo.
Finalmente, si trazas o rellenas una ruta utilizando el patrón, el patrón "invisible" se hace visible en el Lienzo ... pero solo donde se dibuja la ruta.

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // fill using a pattern
    var patternImage=new Image();
    // IMPORTANT! 
    // Always use .onload to be sure the image has
    //     fully loaded before using it in .createPattern
    patternImage.onload=function(){
        // create a pattern object
        var pattern = ctx.createPattern(patternImage,'repeat');
        // set the fillstyle to that pattern
        ctx.fillStyle=pattern;
        // fill a rectangle with the pattern
        ctx.fillRect(50,50,150,100);
        // demo only, stroke the rect for clarity
        ctx.strokeRect(50,50,150,100);
    }
    patternImage.src='http://i.stack.imgur.com/K9EZl.png';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=325 height=250></canvas>
</body>
</html>

trazo (un comando de ruta)

context.stroke()

Hace que el perímetro de la ruta sea trazada de acuerdo con el context.strokeStyle actual. context.strokeStyle y la ruta trazada se dibuja visualmente en el lienzo.

Antes de ejecutar context.stroke (o context.fill ), la ruta existe en la memoria y aún no está dibujada visualmente en el lienzo.

La inusual forma en que se dibujan los trazos.

Considere este camino de ejemplo que dibuja una línea negra de 1 píxel de [0,5] a [5,5] :

// draw a 1 pixel black line from [0,5] to [5,5]
context.strokeStyle='black';
context.lineWidth=1;
context.beginPath();
context.moveTo(0,5);
context.lineTo(5,5);
context.stroke();

Pregunta: ¿Qué dibuja realmente el navegador en el lienzo?

Probablemente esperas obtener 6 píxeles negros en y = 5

Pero (!) ... ¡El lienzo siempre dibuja trazos a mitad de camino hacia cualquier lado del camino definido!

Entonces, como la línea está definida en y==5.0 Canvas quiere dibujar la línea entre y==4.5 y y==5.5

Pero, otra vez (!) ... ¡La pantalla de la computadora no puede dibujar medio píxeles!

Entonces, ¿qué se debe hacer con los medios píxeles no deseados (que se muestran en azul a continuación)?

La respuesta es que Canvas en realidad ordena a la pantalla dibujar una línea de 2 píxeles de ancho de 4.0 a 6.0 . También colorea la línea más clara que el black definido. Este extraño comportamiento de dibujo es "anti-aliasing" y ayuda a Canvas a evitar trazos que parezcan irregulares.

Un truco de ajuste que SOLO funciona para movimientos horizontales y verticales exactamente

Puede obtener una línea negra continua de 1 píxel especificando que la línea se dibuje en el medio píxel:

context.moveTo(0,5.5);
context.lineto(5,5.5);

Código de ejemplo que usa context.stroke() para dibujar una ruta trazada en el lienzo:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.lineWidth=2;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

Rellenar (un comando de ruta)

context.fill()

Hace que el interior de la ruta se rellene de acuerdo con el context.fillStyle actual. context.fillStyle relleno y la ruta rellena se dibuja visualmente en el lienzo.

Antes de ejecutar context.fill (o context.stroke ), la ruta existe en la memoria y aún no está dibujada visualmente en el lienzo.

Ejemplo de código usando context.fill() para dibujar una ruta llena en el lienzo:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.fillStyle='blue';
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

clip (un comando de ruta)

context.clip

Limita los dibujos futuros para mostrar solo dentro de la ruta actual.

Ejemplo: Clip de esta imagen en un camino triangular

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src='http://i.stack.imgur.com/1CqWf.jpg'

    function start(){
        // draw a triangle path
        ctx.beginPath();
        ctx.moveTo(75,50);
        ctx.lineTo(125,100);
        ctx.lineTo(25,100);
        ctx.lineTo(75,50);
        
        // clip future drawings to appear only in the triangle
        ctx.clip();
        
        // draw an image
        ctx.drawImage(img,0,0);
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=150 height=150></canvas>
</body>
</html>

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

html5-canvas
Ruta (solo sintaxis)

Buscar..

Sintaxis

Resumen de los comandos básicos de trazado de trayectos: líneas y curvas.

Descripción de los comandos básicos de dibujo:

lineTo (un comando de ruta)

arco (un comando de ruta)

quadraticCurveTo (un comando de ruta)

bezierCurveTo (un comando de ruta)

arcTo (un comando de ruta)

rect (un comando de ruta)

closePath (un comando de ruta)

beginPath (un comando de ruta)

lineCap (un atributo de estilo de ruta)

lineJoin (un atributo de estilo de ruta)

strokeStyle (un atributo de estilo de ruta)

fillStyle (un atributo de estilo de ruta)

lineWidth (un atributo de estilo de ruta)

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (atributos de estilo de ruta)

createLinearGradient (crea un objeto de estilo de ruta)

createRadialGradient (crea un objeto de estilo de ruta)

Los detalles oficiales de miedo

createPattern (crea un objeto de estilo de ruta)

trazo (un comando de ruta)

La inusual forma en que se dibujan los trazos.

Rellenar (un comando de ruta)

clip (un comando de ruta)