欢迎来到天天文库
浏览记录
ID：2402181
大小：40.66 KB
页数：3页
时间：2017-11-15
《html5canvas移动》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、HTML5Canvas移动2011-12-2215:17:49 我来说两句 收藏 我要投稿 [字体：小 大]移动Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的原型如下：voidtranslate(x,y);用于将该Context对象所对应的Canvas的(0,0)点移动到(x,y)点，并将其作为新的(0,0)点。通过试验表明，translate()方法是通过把当前(0,0)点设置为(-x,-y)点来实现这种移动的，并且改变后坐标原点将会影响由该Canvas对象生成的其它Context对象。但
2、是，与Canvas中其它操纵图像的方法一样，translate()也只会影响移动后绘制的图形，对已经绘制到画布中的图形无效。下面的示例展示了移动的效果：
Yourbrowserdoesnotsupportthecanvaselement!
3、lementById("canvas"); varcontext2D=canvas.getContext("2d"); varpic=newImage(); pic.src="milaoshu.jpg"; //注意目录结构，这里是把图片和html放在一个目录的 //注意下面方法中画笔状态的保护，这在很多情况下都会使用到 functiondraw(){ context2D.clearRect(0,0,600,400); context2D.save();//保存画笔状态 context2D.t
4、ranslate(600/2*Math.random(),400/2*Math.random());//开始移动画笔 context2D.drawImage(pic,0,0); context2D.restore();//绘制结束以后，恢复画笔状态 } setInterval(draw,1000);
5、
6、functiondraw(){ context2D.clearRect(0,0,600,400); context2D.save();//保存画笔状态 context2D.translate(600/2*Math.random(),400/2*Math.random());//开始移动画笔 context2D.drawImage(pic,0,0); context2D.restore();//绘制结束以后，恢复画笔状态 } setInterval(draw,1000); 效果图： 由于是动态的，看不出效果，抱歉
7、。 摘自冯小卫
此文档下载收益归作者所有
