理解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)。