HTML5 Canvas 移动

Context对象可以通过调用translate()方法来移动Canvas画布中坐标原点的位置。translate()方法的原型如下：

void translate(x, y);

用于将该Context对象所对应的Canvas的(0, 0)点移动到(x, y)点，并将其作为新的(0, 0)点。通过试验表明，translate()方法是通过把当前(0, 0)点设置为(-x, -y)点来实现这种移动的，并且改变后坐标原点将会影响由该Canvas对象生成的其它Context对象。但是，与Canvas中其它操纵图像的方法一样，translate()也只会影响移动后绘制的图形，对已经绘制到画布中的图形无效。

下面的示例展示了移动的效果：

 

[html] view plaincopy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. <canvas id="canvas" width="600"height="400">      
  5.          <p>Your browserdoes not support the canvas element!</p>      
  6. </canvas>      
  7.        
  8. <script type="text/javascript">      
  9.     var canvas =document.getElementById("canvas");      
  10.     var context2D =canvas.getContext("2d");   
  11.     var pic = new Image();   
  12.     pic.src ="milaoshu.jpg";  //注意目录结构，这里是把图片和html放在一个目录的  
  13.       
  14.     //注意下面方法中画笔状态的保护，这在很多情况下都会使用到  
  15.     function draw(){  
  16.         context2D.clearRect(0,0,600,400);  
  17.         context2D.save();//保存画笔状态  
  18.         context2D.translate(600/2*Math.random(), 400/2*Math.random());//开始移动画笔  
  19.         context2D.drawImage(pic,0, 0);  
  20.         context2D.restore();//绘制结束以后，恢复画笔状态  
  21.     }          
  22.        
  23.     setInterval(draw, 1000);  
  24.        
  25. </script>      
  26. </body>  
  27. </html>  
posted @ 2015-08-04 18:11  Shawn_liu  阅读(436)  评论(0)  编辑  收藏  举报