Tradução JavaScript

Resumo : neste tutorial, você aprenderá como usar a translate()API JavaScript para mover a origem do canvas para a nova posição.

Introdução ao método JavaScript translate().

Este translate()é um método de contexto de desenho 2D. O translate(x,y)método move a tela e suas x unidades de origem horizontalmente e yunidades verticalmente.

O seguinte ilustra a sintaxe do translate()método:

ctx.translate(x, y);Linguagem de código:  CSS  ( css )

Nesta sintaxe:

• xrepresenta a distância que você deseja mover da origem da tela na direção horizontal. A origem se move para a esquerda se xfor positiva e para a direita se xfor negativa.
• y representa a distância que você deseja mover da origem da tela na direção vertical. A origem move-se para baixo se yfor positiva e para cima se yfor negativa.

Por padrão, a origem da tela (0,0)está no canto superior esquerdo da tela. Ao adicionar uma transformação de translação, todo o sistema de coordenadas se move de modo que sua nova origem se localize em (x,y):

Pode translate()ser muito útil no desenho. Suponha que você queira desenhar dois objetos, um é a tradução do outro.

Para fazer isso, você pode desenhar o primeiro objeto, aplicar uma transformação de translação e desenhar o segundo objeto.

Se você não aplicar a transformação de translação, será necessário calcular as novas coordenadas para o segundo objeto.

Exemplos de tradução de JavaScript()

Vejamos alguns exemplos de uso do translate()método JavaScript.

1) Exemplo simples de tradução de JavaScript ()

O exemplo a seguir desenha um quadrado em (100,100)e o segundo quadrado em (150,150). Ele chama o translate()método para mover a origem original da tela para (150, 150)desenhar o segundo quadrado.

HTML

<canvas id="canvas" height="300" width="500">
</canvas>Linguagem de código:  HTML, XML  ( xml )

JavaScript

const canvas = document.querySelector('#canvas');

if (canvas.getContext) {

    const ctx = canvas.getContext('2d');
    // draw the first square
    ctx.fillStyle = 'red';
    ctx.fillRect(100, 100, 50, 50);

    // translate
    ctx.translate(150, 150);

    // draw the second square
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 50, 50);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

2) Usando JavaScript translate() para desenhar um relógio

O exemplo a seguir desenha um relógio no centro da tela . Para facilitar o desenho dos ponteiros das horas e dos minutos, ele traduz a origem da tela para o centro do relógio.

HTML

<canvas id="canvas" height="300" width="500">
</canvas>Linguagem de código:  HTML, XML  ( xml )

JavaScript

const canvas = document.querySelector('#canvas');

if (canvas.getContext) {

    const ctx = canvas.getContext('2d');

    ctx.beginPath();

    const centerX = canvas.width / 2,
        centerY = canvas.height / 2;

    // draw the circle
    ctx.arc(centerX, centerY, 70, 0, 2 * Math.PI, false);

    // translate to center
    ctx.translate(centerX, centerY);

    // draw the hour hand
    ctx.moveTo(0, 0);
    ctx.lineTo(-30, -20);

    // draw the minute hand
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -55);

    ctx.stroke();

}Linguagem de código:  JavaScript  ( javascript )

Aqui está o link de demonstração .

Resumo

• Use o JavaScript translate() para mover a tela e sua origem x unidades horizontalmente e y unidades verticalmente.