javascript canvas transform

保存和恢复状态

save()

restore()

save和restore用于保存和恢复画布状态，画布状态是画布当前所有样式、transformation、当前clipping path的一个快照。

画布状态保存在stack中，每次调用save时，当前状态将会被压入栈中，调用restore时恢复最近一次压入栈中的状态。

 

在使用transformation函数时，先执行save，完成操作之后调用restore能减轻操作负担。

 

translate(x, y)

用于将画布的原点移动到当前当前的x，y处

 

rotate(angle)

将画布沿着顺时针，旋转angle弧度

 

scale(xScale, yScale)

在当前尺度上乘以对应缩放比例

 

setTransform(scaleX, skewX, skewY, scaleY, translateX, translateY)

transform(scaleX, skewX, skewY, scaleY, translateX, translateY)

用一个函数同时设置translate，rotate，scale。

setTransform将变换矩阵设置为单位矩阵，然后乘以参数指定的变换矩阵，常用来clear变换矩阵到初始状态。context.setTransform(1, 0, 0, 1, 0, 0)

transform在当前变换矩阵上乘以参数指定的变换矩阵

 

http://www.rgraph.net/blog/2013/february/an-example-of-the-html5-canvas-transform-function.html

 

http://www.tutorialspark.com/html5/HTML5_Canvas_Transformation.php