Comentario: Podemos usar "ruta" para dibujar cualquier gráfico. La ruta es simplemente una serie de puntos y las líneas que conectan estos puntos. Cualquier contexto de lienzo solo tendrá una "ruta actual", y cuando se llama context.save (), la "ruta actual" no se guardará
original:? P = 371
Este artículo se traduce de Steve Fulton y Jeff Fulton HTML5 Canvas, Capítulo 2, utilizando rutas para crear líneas
Para el lienzo HTML5, podemos usar rutas para dibujar cualquier gráfico. La ruta es simplemente una serie de puntos y las líneas que conectan estos puntos. Cualquier contexto de lienzo tendrá solo una ruta actual, y cuando se llama context.save (), la ruta actual no se guardará.
El principio y el final del camino
Llamar a BeginPath () puede iniciar una ruta, mientras que llamar a ClosePath () finalizará el camino. Si conecta un punto en la ruta, esta conexión forma una subpath. Si el último punto en el subpath está conectado a su primer punto, consideramos que el subpath está cerrado.
Dibujo de línea
La operación de ruta más básica consiste en llamadas repetidas a los comandos Moveto () y Lineto (). Por ejemplo, el siguiente ejemplo:
función drawScreen () {
context.strokestyle = "negro";
context.linewidth = 10;
context.lineCap = 'Square';
context.beginPath ();
context.moveto (20, 0);
context.lineto (100, 0);
context.stroke ();
context.ClosePath ();
}
En el ejemplo anterior, representamos un segmento de línea horizontal con un ancho de 10 píxeles; Al mismo tiempo, también establecemos las propiedades de Linecap y Strokestyle. Aquí hay una lista de algunas propiedades de uso común:
linecap
Linecap define el estilo en ambos extremos del segmento de línea en lienzo, y se puede establecer en uno de los siguientes tres valores:
culata. Valor predeterminado; Agregue bordes rectos en ambos extremos del segmento de línea.
redondo. Agregue una tapa de línea semicircular en cada extremo del segmento de línea. El diámetro de la tapa de la línea es igual al ancho del segmento de línea.
cuadrado. Agregue tapas de línea cuadradas a ambos extremos del segmento de línea. La longitud de la tapa de la línea es igual al ancho del segmento de línea.
LineJoin
Linejoin define el patrón de esquina en la intersección de dos segmentos de línea. Los siguientes son tres valores opcionales:
inglete. Por defecto; Crea una esquina afilada. Puede limitar la longitud de los ángulos afilados estableciendo la propiedad MiterLimit: Mitterlimit es la relación máxima de longitud y ancho de línea del ángulo agudo, y el valor predeterminado es 10.
bisel. Crear un bisel.
redondo. Crea una esquina redondeada.
ancho de línea
LineWidth define el grosor de la línea, y el valor predeterminado es 1.0.
estilo de strokest
Strokestyle define los estilos, como los colores utilizados para renderizar líneas.
Nota del traductor: Cuando LineJoin se establece en Mitre, pero la longitud de la esquina afilada excede el límite de Miterlimit, el lienzo mostrará el efecto de esquina bisel.