请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 Canvas坐标转换

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

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


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



示例代码如下:

save(); //将当前绘图状态压入栈中保存
ctx.translate(100,100); //开始转换坐标
... //进行计划中的操作
restore(); //恢复坐标系统
以上操作非常类似于一个印刷机的工作。印刷机在真实工作环境中,是纸不动,喷头在运动,而在Canvas绘图过程中,实际上是“喷头”并未移动,而是画布在不停地移动(转换绘图坐标)。

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



鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-12-11 11:28 , Processed in 0.083466 second(s), 31 queries .

返回顶部