HTML5 Canvas坐标转换

2013-12-15 18:29| 发布者: admin| 查看: 1786| 评论: 0

摘要: 在Canvas绘图过程中，坐标始终是从左上角的起始位置开始的。但是，在实际的开发中，常常有多个元素的坐标系统混合在一起，translate()是一个非常有用的转换元素坐标的方法。translate()方法的理解见下图：示例代码如 ...

在Canvas绘图过程中，坐标始终是从左上角的起始位置开始的。但是，在实际的开发中，常常有多个元素的坐标系统混合在一起，translate()是一个非常有用的转换元素坐标的方法。

translate()方法的理解见下图：

示例代码如下：

save(); //将当前绘图状态压入栈中保存
ctx.translate(100,100); //开始转换坐标
... //进行计划中的操作
restore(); //恢复坐标系统

以上操作非常类似于一个印刷机的工作。印刷机在真实工作环境中，是纸不动，喷头在运动，而在Canvas绘图过程中，实际上是“喷头”并未移动，而是画布在不停地移动（转换绘图坐标）。

注意，在转换坐标原点之前，千万别忘了保存状态，当然，绘制完毕后也别忘了恢复状态，否则会造成绘图层污染，产生意想不到的错误。

上一篇：HTML5 Canvas绘图状态之保存和恢复下一篇：HTML5 Canvas旋转和缩放

设为首页