Línea en HTML Canvas

实例

// Crear lienzo:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definir una nueva ruta:
ctx.beginPath();
// Definir el punto de partida:
ctx.moveTo(0, 0);
// Definir el punto final:
ctx.lineTo(200, 100);
// Dibujar:
ctx.stroke();

Pruebe usted mismo

Dibujo de línea Canvas

El dibujo de línea utiliza la ruta en el lienzo:

Método

El método beginPath() comienza una nueva ruta. No dibuja nada, solo define una nueva ruta.

El método moveTo() define el punto de partida de la línea. No dibuja nada, solo establece un punto de partida.

El método lineTo() define el punto final de la línea. No dibuja nada, solo establece un punto final.

El método stroke() dibuja realmente la línea. El color predeterminado del trazo es negro.

Propiedad lineWidth

La propiedad lineWidth define el ancho de la línea que se utiliza para dibujar en la lienzo.

Debe establecerla antes de llamar al método stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Pruebe usted mismo

Propiedad strokeStyle

La propiedad strokeStyle define el estilo que se utiliza para dibujar en la lienzo.

Debe establecerla antes de llamar al método stroke().

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Pruebe usted mismo

Propiedad lineCap

La propiedad lineCap define el estilo del extremo de la línea (butt, round o square).

El valor predeterminado es square (cuadrado).

Debe establecerla antes de llamar al método stroke().

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Pruebe usted mismo

Vea también:

Manual de referencia completo de Canvas de CodeW3C.com