Método de conversão de tela HTML ()

❮ Referência de tela HTML

Exemplo

Desenhe um retângulo na posição (10,10), defina a nova posição (0,0) para (70,70). Desenhe o mesmo retângulo novamente (observe que o retângulo agora começa na posição (80,80):

Seu navegador não suporta a tag HTML5canvastag.

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);

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
translate() Yes 9.0 Yes Yes Yes

Definição e uso

O método translate() remapeia a posição (0,0) na tela.

Nota: Quando você chama um método como fillRect() após translate(), o valor é adicionado aos valores das coordenadas x e y.

Ilustração do método translate()

Sintaxe JavaScript: contexto .translate( x,y );

Valores de parâmetro

Nota: Você pode especificar um ou ambos os parâmetros.

Parameter Description Play it
x The value to add to horizontal (x) coordinates
y The value to add to vertical (y) coordinates

❮ Referência de tela HTML