Como desenhar uma linha em JavaScript

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étodo moveTo(x, y).
Finalmente, desenhe uma linha do ponto anterior até point (x,y)chamando o lineTo(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 lineWidthpropriedade 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 xpositivo, 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 yfor 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.htmlarquivo 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()e moveTo(x, y)para lineTo(x,y)desenhar uma linha.
Use strokeStylee lineWidthpara definir o traçado e a largura da linha.

Escala JavaScript

PushState do histórico do JavaScript