Forma en Canvas HTML

实例

Ejemplo 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Pruebe usted mismo

Dibujo de líneas en Canvas

El dibujo de líneas se realiza utilizando la trayectoria del lienzo:

El método

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

moveTo() Define el punto de partida de la línea. No dibuja nada, solo configura un punto de partida.

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

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

Más ejemplos

Ejemplo 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Pruebe usted mismo

Ejemplo 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Pruebe usted mismo

Consejo

Si desea dibujar un rectángulo, no es necesario dibujar 4 líneas.

En el siguiente capítulo, aprenderá a usar drawRect() Método para dibujar un rectángulo.

La propiedad strokeStyle

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

Debe llamarse antes de stroke() Configúrelo antes de llamar al

实例

ctx.beginPath();
// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Pruebe usted mismo

Véase también:

Manual de referencia completo de Canvas en CodeW3C.com