HTML canvas translate()Método

HTML canvas 参考手册Manual de referencia de HTML canvas

Ejemplo

Dibuja un rectángulo en la posición (10,10), establece la nueva posición (0,0) en (70,70). Dibuja nuevamente el nuevo rectángulo (ten en cuenta que ahora el rectángulo comienza en la posición (80,80)):

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Pruébalo »

Soporte del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método translate().

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.

Definición y uso

El método translate() reasigna la posición (0,0) del lienzo.

Nota:Cuando llamas a métodos como fillRect() después de translate(), los valores se agregan a los valores de las coordenadas x e y.

Illustration of the translate() method

Sintaxis de JavaScript: context.translate(x,y);

Valores de parámetros

Nota: You can specify one or both parameters.

Parámetro Descripción
x Valor agregado a la coordenada horizontal (x).
y Valor agregado a la coordenada vertical (y).

HTML canvas 参考手册Manual de referencia de HTML canvas Otras extensiones