Método HTML canvas translate()
Definición y uso
translate() para mapear nuevamente la ubicación (0,0) en el lienzo.
Nota:Cuando llama a métodos como fillRect() al usar métodos como x y y valores de coordenadas.
Ejemplo
Dibuje un rectángulo en la ubicación (10,10), configure la nueva ubicación (0,0) como (70,70). Dibuje nuevamente el rectángulo nuevo (tenga en cuenta que ahora el rectángulo comienza en la ubicación (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);
Sintaxis
context.translate(x,y);
Valor del parámetro
| Parámetros | Descripción |
|---|---|
| x | Agregar el valor a la coordenada horizontal (x). |
| y | Agregar el valor a la coordenada vertical (y). |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad por primera vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
