Linha no Canvas HTML

实例

// Criação do canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Define uma nova trilha:
ctx.beginPath();
// Define o ponto inicial:
ctx.moveTo(0, 0);
// Define o ponto final:
ctx.lineTo(200, 100);
// Desenho:
ctx.stroke();

Experimente você mesmo

Desenho de linha no Canvas

A desenho de linha usa a trilha no canvas:

Método

O método beginPath() começa uma nova trilha. Ele não desenha nada, apenas define uma nova trilha.

O método moveTo() define o ponto inicial da linha. Ele não desenha nada, apenas define um ponto inicial.

O método lineTo() define o ponto final da linha. Ele não desenha nada, apenas define um ponto final.

O método stroke() desenha realmente a linha. A cor padrão do traço é preta.

Propriedade lineWidth

A propriedade lineWidth define a largura da linha a ser usada ao desenhar no canvas.

Deve ser configurado antes de chamar o método stroke().

实例

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

Experimente você mesmo

Propriedade strokeStyle

A propriedade strokeStyle define o estilo a ser usado ao desenhar no canvas.

Deve ser configurado antes de chamar o método stroke().

实例

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

Experimente você mesmo

Propriedade lineCap

A propriedade lineCap define o estilo do final da linha (butt, round ou square).

O padrão é square (quadrado).

Deve ser configurado antes de chamar o método stroke().

实例

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

Experimente você mesmo

Veja também:

Manual Completo do Canvas no CodeW3C.com