Método HTML canvas translate()
Ejemplo
Dibuje un rectángulo en la posición (10,10), establezca la nueva posición (0,0) en (70,70). Dibuje el mismo rectángulo nuevamente (observe que el rectángulo ahora comienza en la posició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);
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| translate() | Yes | 9.0 | Yes | Yes | Yes |
Definición y uso
El método translate() reasigna la posición (0,0) en el lienzo.
Nota: cuando llama a un método como fillRect() después de translate(), el valor se agrega a los valores de las coordenadas x e y.
| Sintaxis de JavaScript: | contexto .translate( x,y ); |
|---|
Valores paramétricos
Nota: Puede especificar uno o ambos parámetros.
| Parameter | Description | Play it |
|---|---|---|
| x | The value to add to horizontal (x) coordinates | |
| y | The value to add to vertical (y) coordinates |
❮ Referencia de lienzo HTML