最新的Web開發教程
 

HTML canvas translate() Method

<畫布對象

例

繪製在適當的位置的矩形(10,10)設置新的(0,0)位置(70,70) 再次繪製相同的矩形(notice that the rectangle now starts in position (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);
試一試»

瀏覽器支持

在表中的數字規定，完全支持方法的第一個瀏覽器版本。

方法
translate() 4 9 3.6 4 10.1

定義和用法

的translate()方法重新映射(0,0)在畫布上的位置。

Note:當你調用一個方法，比如fillRect()後， translate()該值被添加到X軸和Y坐標值。

在<跨度類的圖示= translate（）方法“/>

JavaScript語法： context 。 translate( x,y ) ;

參數值

Note:您可以指定一個或兩個參數。

參數 描述 播放
x 值要添加到水平方向(x)坐標 播放 ”
y 值要添加到垂直(y)坐標 播放 ”
<畫布對象