HTML canvas translate () method
Examples
At the position (10,10) Draw a rectangle, the new (0,0) is set to the position (70, 70). Again draw a new rectangle (rectangle note now to start drawing from the position (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);
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support translate () method.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
translate () method of remapping (0,0) position on the canvas.
Note: When you call a method such as fillRect () like after () in translate, value is added to the x and y coordinates.
| JavaScript syntax: | context .translate (x, y); |
|---|
Parameter Value
Note: You can specify one or both parameters .
| 参数 | 描述 |
|---|---|
| x | 添加到水平坐标（x）上的值。 |
| y | 添加到垂直坐标（y）上的值。 |
HTML canvas Reference Manual