保存和恢复状态
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