最新的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)坐标 播放 ”
<画布对象