例
在繪製位置的矩形(10,10)設置新的(0,0)位置(70,70) 再次繪製相同的矩形（請注意，矩形現在位置開始(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);
試一試» 瀏覽器支持
在表中的數字指定完全支持方法的第一個瀏覽器的版本。
| 方法 | |||||
|---|---|---|---|---|---|
| translate() | 是 | 9 | 是 | 是 | 是 |
定義和用法
該translate()方法重新映射(0,0)在畫布上的位置。
注意：當調用一個方法如fillRect()後translate()該值被添加到X和Y坐標值。
| JavaScript語法： | context.translate( x,y ); |
|---|
參數值
注意：您可以指定一個或兩個參數。
| 參數 | 描述 | 播放 |
|---|---|---|
| x | 值要添加到水平方向（x）的坐標 | 播放 ” |
| y | 值要添加到垂直（y）坐標 | 播放 ” |