首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

了解HTML5 canvas.translate(x,y)

2012-09-22 
理解HTML5 canvas.translate(x,y)规范原文如下:The translate(x, y) method must add the translation tra

理解HTML5 canvas.translate(x,y)

规范原文如下:
The translate(x, y) method must add the translation transformation described by the arguments to the transformation matrix. The x argument represents the translation distance in the horizontal direction and the y argument represents the translation distance in the vertical direction. The arguments are in coordinate space units.
原文见:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-translate

translate(x,y)函数是将整个canvas水平移动x距离,垂直移动y距离。
canvas是以(0,0)为默认原点,其原点默认在屏幕左上角;通过translate(x,y)把点(x,y)作为原点。
需要注意的是:是在原点的基础上分别偏移x和y。
例子:原点假如落在(1,1),那么translate(10,10)就是在原点(1,1)基础上分别在x轴、y轴移动10,则原点变为(11,11)。

热点排行