HTML5Canvas移动_第1页
HTML5Canvas移动_第2页
HTML5Canvas移动_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML5 Canvas 移动2011-12-22 15:17:49     我来说两句 收藏    我要投稿    字体：小 大移动Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的原型如下：void translate(x, y);用于将该Context对象所对应的Canvas的(0, 0)点移动到(x, y)点，并将其作为新的(0, 0)点。通过试验表明，translate()方法是通过

2、把当前(0, 0)点设置为(-x, -y)点来实现这种移动的，并且改变后坐标原点将会影响由该Canvas对象生成的其它Context对象。但是，与Canvas中其它操纵图像的方法一样，translate()也只会影响移动后绘制的图形，对已经绘制到画布中的图形无效。下面的示例展示了移动的效果：<!DOCTYPE HTML> <html> <body> <canvas id="canvas" width="600"height="400">  

3、;            <p>Your browserdoes not support the canvas element!</p>     </canvas>           <script type="text/javascript"> &

4、#160;       var canvas =document.getElementById("canvas");         var context2D =canvas.getContext("2d");      var pic = new Image();      pic.src ="milao

5、shu.jpg"  /注意目录结构，这里是把图片和html放在一个目录的          /注意下面方法中画笔状态的保护，这在很多情况下都会使用到     function draw()         context2D.clearRect(0,0,600,400);        

6、context2D.save();/保存画笔状态         context2D.translate(600/2*Math.random(), 400/2*Math.random();/开始移动画笔         context2D.drawImage(pic,0, 0);         context2D.restore();/绘制结束以后，恢复画

7、笔状态                        setInterval(draw, 1000);       </script>     </body> </html> <!DOCTYPE H

8、TML><html><body><canvas id="canvas" width="600"height="400">            <p>Your browserdoes not support the canvas element!</p>   </canvas>   

9、0;   <script type="text/javascript">    var canvas =document.getElementById("canvas");    var context2D =canvas.getContext("2d"); var pic = new Image(); pic.src ="milaoshu.jpg"  /注意目录结

10、构，这里是把图片和html放在一个目录的  /注意下面方法中画笔状态的保护，这在很多情况下都会使用到 function draw()  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();/绘制结束以后，恢复画笔状态  

人人文库> 全部分类> 应用文书 > 研究报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论