HTML5 La ruta del Canvas

HTML5 La ruta del Canvas se utiliza en HTML5Dibujar varios tipos de formas (líneas, círculos, polígonos, etc.) en el lienzo, la ruta se utiliza en HTML5Dibujar varios tipos de formas en el lienzo

HTML5 La ruta del Canvas es una serie de puntos, entre los cuales hay instrucciones de dibujo. Por ejemplo, entre una serie de puntos hay una línea recta, o entre ellos hay un arco.

La ruta se utiliza en HTML5Dibujar varios tipos de formas (líneas, círculos, polígonos, etc.) en el lienzo, por lo que es muy importante entender este concepto central.

para comenzar y cerrar rutas - Ruta

Usa2La función Context beginPath() y puede comenzar y cerrar rutas closePath() como se muestra a continuación:

var canvas = document.getElementById("ex1);
var context = canvas.getContext("2d");context.beginPath();
//　...operaciones de dibujo de rutas
context.closePath();

moveTo()

Al dibujar con rutas, usa una pluma virtual o puntero. El puntero virtual siempre está en algún punto. Usa2La función Context completa el movimiento del puntero virtual moveTo(x, y), como se muestra a continuación:

context.moveTo(10,10);

Este ejemplo mueve el puntero al punto10,10.

function, pero se puede usar

La función lineTo() dibuja una línea desde la posición del puntero virtual al punto como parámetro de la función. Este es un ejemplo:

context.beginPath();
context.moveTo(10,10);
context.lineTo(50,50);
context.closePath();

Este ejemplo mueve el puntero al punto10,10, luego dibuja una línea desde ese punto hasta el punto50,50.

lineTo() también moverá el puntero virtual al final de esa línea. Por lo tanto, en el ejemplo anterior, el puntero se mueve a50,50, al mismo tiempo indicando que el lienzo dibuje una línea hasta ese punto.

stroke() + fill()

En el punto que usted indica2Antes de dibujar la ruta, el contexto no dibujará ninguna ruta. Al llamar2El contexto stroke() o fill() en2Se completa esta operación en el contexto.
La función stroke() dibujará el contorno de la forma definida por las operaciones de ruta.
La función fill() llenará la forma definida por las operaciones de ruta.
Este es un ejemplo de ambos, stroke() y fill() aplicados a la misma forma:

<canvas id="ex1" width="500" height="75" style="border:　1px sólido #cccccc;">
HTML5　Canvas no soportado
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();</script>

Este es el resultado de ejecutar el código anterior:

LineWidth

Puede usar lineWidth 2La propiedad de atributo del contexto define el ancho de las líneas dibujadas por las diferentes funciones de trazo. Este es un ejemplo:

context.lineWidth =　10;

上面的示例将所有后续笔画绘制操作的线宽设置为10El ejemplo superior establecerá el ancho de línea para todas las operaciones de dibujo posteriores.
píxeles.1,5y10Estos son tres líneas, con anchos de línea分别为

:1Cuando el ancho de línea es mayor que10,10a100,10Dibujar una línea, el ancho de la línea es10, entonces la línea realmente se extenderá10,5Comienza y se extiende a10,15, luego se extiende horizontalmente a100,5y100,15Desde allí. Como un rectángulo.

LineCap

Al dibujar líneas con una ruta, se puede configurar el lineCap de la línea. El lineCap define cómo se dibuja el extremo de la línea.
El ancho de línea se configura a través de lineCap2La propiedad de contexto D se configura. Puede tomar los siguientes valores:

• butt

• round

• square

Este valor butt hace que el extremo de la línea sea plano y perpendicular a la línea.
Este valor round produce un extremo de línea con un radio de esquina que es la mitad del ancho de línea.
Este valor square hace que se dibuje un rectángulo en el extremo de la línea, del tamaño ancho de línea x ancho de línea / 2.
Este es un grupo de ejemplos que ilustran el lineCap. El ancho de todas las líneas es10. La línea más a la izquierda utiliza el valor de lineCap butt. La línea central utiliza el valor de lineCap round. La línea más a la derecha utiliza el valor lineCap square

Puede ser un poco difícil ver la diferencia entre las líneas con los valores de lineCap butt y square. Por lo tanto, he creado algunos ejemplos de líneas con butt y square, que se dibujan uno al lado del otro para que puedas ver la diferencia. En la parte superior o izquierda se utiliza butt, en la parte inferior o derecha se utiliza square.

Como puedes ver, el cuadrado con el valor de lineCap en el extremo dibuja un rectángulo adicional, lo que hace que la línea sea un poco más larga.

Conexión de línea (lineJoin)

lineJoin 2La propiedad de contexto D define cómo se dibujan los puntos de conexión entre dos líneas. Los puntos de conexión entre dos líneas se denominan "conexión de línea". La propiedad lineJoin puede tener los siguientes valores:

• miter

• bevel

• round

Estos son tres ejemplos de código para establecer la conexión de línea:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

El valor del resultado miter hace que se dibuje una esquina aguda en las conexiones de línea.
El valor del resultado bevel hace que se dibuje una esquina aguda en las conexiones de línea.
El valor del resultado round hace que se dibuje una esquina redondeada en las conexiones de línea.
Estos son tres ejemplos (desde la izquierda) miter, bevel y round utilizados como valores de la propiedad lineJoin.

arc()

2La función arc() del contexto D dibuja arcos en el lienzo.

La función arc() utiliza6个参数:

• parámetros:x

• : Coordenada x del punto central del arco de círculoy

• : Coordenada y del punto central del arco de círculoradius

• : Radio del arco de círculostartAngle

• : Ángulo de radio inicial en radianesendAngle

• : Ángulo de radio final en radianesanticlockwise

: Establece si la dirección de inserción es antihoraria (no horaria).

context.lineWidth =　3;
Este es un ejemplo de código:　50;
var x =　50;
var y =　25;
var radius =　/　18Math.PI es igual a (Math.PI　*　45;
var startAngle = (Math.PI　/　18Math.PI es igual a (Math.PI　*　90;
var endAngle = (Math.PI
context.beginPath();
var anticlockwise = false;
context.stroke();
context.closePath();

context.arc(x, y, radio, startAngle, endAngle, anticlockwise);50,5Este ejemplo de código dibuja un arco de círculo, con el centro en250, el radio es45píxeles, desde18grados se extiende hasta360 grados. Puede haber notado que desde 0 grados hasta
0 grados se convertirá a radianes.

Así es como se ve el ejemplo de código dibujado en el lienzo:

Este es el mismo ejemplo de código, pero con anticlockwise configurado en true:2 * Para dibujar un círculo completo, configure simplemente startAngle a 0 y endAngle a / 18Math.PI es igual a (Math.PI * 360

El contexto D tiene un

20)El contexto D tiene unarcTo()function, pero se puede usarypara imitar su funciónarc()por lo que lo voy a omitir

quadraticCurveTo()

La función quadraticCurveTo() dibuja una curva de Bézier cuadrática desde un punto a otro. La curva está controlada por un solo punto de control. Este es un ejemplo de código:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　100;
var toY =　50;
var cpX =　75;
var cpY =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

Este ejemplo de código utiliza puntos de control75,100 (cpX, cpY) dibujó una línea desde50,50 hasta100,5La curva de 0. El resultado de la curva es el siguiente:

Los puntos pequeños en el lienzo son los puntos de control que he dibujado aquí. Generalmente no son parte de la curva.

bezierCurveTo()

La función bezierCurveTo() dibuja una curva de Bézier de tercer grado desde un punto a otro. La curva de Bézier de tercer grado tiene2puntos de control, mientras que la curva de Bézier cuadrática solo tiene1puntos de control. Este es un ejemplo de código:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　100;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Este ejemplo de código utiliza puntos de control100,100 (cp1X, cp1Y) y250,100 (cp2X, cp2Y) dibujar desde50,50 hasta300,5La curva de 0. El resultado de la curva es el siguiente:

Los dos puntos pequeños en el lienzo son los puntos de control que he dibujado, utilizados para mostrarles su ubicación. No se han dibujado como parte de una curva.
Este es un ejemplo que utiliza diferentes puntos de partida, de destino y de control:

context.lineWidth =　3;
var fromX =　50;
var fromY =　50;
var toX =　300;
var toY =　50;
var cp1X =　100;
var cp1Y =　10;
var cp2X =　250;
var cp2Y =　100;
context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

Esta es la curva correspondiente:

Asimismo, dos puntos pequeños son puntos de control de renderizado claros