Método Canvas translate()
Definição e uso
translate() métodos para mapear a nova posição (0,0) no canvas.
Notas:Quando você chama métodos como fillRect() metodos como esses, os valores são adicionados a x e y no valor do eixo de coordenadas.
Exemplo
Desenhar um retângulo na posição (10,10), definindo a nova posição (0,0) como (70,70). Desenhar novamente o novo retângulo (observe que agora o retângulo começa na posição (80,80)):
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
Sintaxe
context.translate(x,y);
Valor do parâmetro
| Parâmetro | Descrição |
|---|---|
| x | Adicionar valor ao eixo horizontal (x). |
| y | Adicionar valor ao eixo vertical (y). |
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
