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 y
unidades verticalmente.
O seguinte ilustra a sintaxe do translate()
método:
ctx.translate(x, y);
Linguagem de código: CSS ( css )
Nesta sintaxe:
x
representa a distância que você deseja mover da origem da tela na direção horizontal. A origem se move para a esquerda sex
for positiva e para a direita sex
for 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
y
for positiva e para cima sey
for 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.