Resumo : neste tutorial, você aprenderá como desenhar uma linha usando a API Canvas.
Etapas para desenhar uma linha em JavaScript
Para desenhar uma linha em uma tela , siga as seguintes etapas:
- Primeiro, crie uma nova linha chamando o
beginPath()
método. - Segundo, mova o cursor de desenho para o ponto
(x,y)
sem desenhar uma linha chamando o métodomoveTo(x, y)
. - Finalmente, desenhe uma linha do ponto anterior até
point (x,y)
chamando olineTo(x,y)
método.
Definir o traço da linha
Se quiser traçar a linha com strokeStyle
, você pode chamar o stroke()
método depois de chamar o lineTo(x,y)
método.
Defina a largura da linha
Para definir a largura de uma linha, você usa a lineWidth
propriedade do contexto do desenho 2D antes de chamar stroke()
o método:
ctx.lineWidth = 10;
O método lineTo(x,y)
O lineTo(x,y )
método aceita argumentos positivos e negativos.
Se for x
positivo, o lineTo(x,y)
método desenha a linha do ponto inicial à direita. Caso contrário, desenha a linha do ponto inicial para a esquerda.
Se y
for positivo, o lineTo(x,y)
método desenha a linha do ponto inicial até o eixo y. Caso contrário, ele desenha a linha do ponto inicial até o eixo y.
Exemplo de desenho de linha
Veja a seguir o index.html
arquivo que contém um elemento canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript - Drawing a Line</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript - Drawing a Line</h1>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/app.js"></script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
E este app.js contém que desenha uma linha com a cor vermelha, largura de 5 pixels do ponto (100, 100) a (300, 100):
function draw() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
// set line stroke and line width
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
// draw a red line
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.stroke();
}
draw();
Linguagem de código: JavaScript ( javascript )
O seguinte mostra a saída:
Aqui está o link que mostra a tela com a linha.
Desenvolva uma função drawLine() recuperável
A drawLine()
função a seguir desenha uma linha de um ponto a outro com um traço e largura especificados:
function drawLine(ctx, begin, end, stroke = 'black', width = 1) {
if (stroke) {
ctx.strokeStyle = stroke;
}
if (width) {
ctx.lineWidth = width;
}
ctx.beginPath();
ctx.moveTo(...begin);
ctx.lineTo(...end);
ctx.stroke();
}
Linguagem de código: JavaScript ( javascript )
Para desenhar uma linha de (100,100)
até (100,300)
com a cor verde e largura de linha de 5 pixels, você pode chamar a drawLine()
função da seguinte maneira:
const canvas = document.querySelector('#canvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
drawLine(ctx, [100, 100], [100, 300], 'green', 5);
}
Linguagem de código: JavaScript ( javascript )
Resumo
- Use
beginPath()
emoveTo(x, y)
paralineTo(x,y)
desenhar uma linha. - Use
strokeStyle
elineWidth
para definir o traçado e a largura da linha.