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()也只会影响移动后绘制的图形，对已经绘制到画布中的图形无效。

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

!DOCTYPE HTML>  
htML>  
body>  
canvas id="canvas" width="600"height="400">      
         p> Your browserdoes not support the canvas element!/p>      
/canvas>      
      
script type="text/javascript">      
    VAR canvas =document.getElementById("canvas");      
    var context2D =canvas.getContext("2d");   
    var pic = new Image();   
    pic.src ="milaoshu.jpg";   //注意目录结构，这里是把图片和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(); //绘制结束以后，恢复画笔状态 
    }          
      
    setInterval(draw, 1000);  
      
/script>      
/body>  
/html>  
!DOCTYPE HTML>
html>
body>
canvas id="canvas" width="600"height="400">    
         p> Your browserdoes not support the canvas element!/p>    
/canvas>    
    
script type="text/javascript">    
 var canvas =document.getElementById("canvas");    
 var context2D =canvas.getContext("2d");
 var pic = new Image();
 pic.src ="milaoshu.jpg";   //注意目录结构，这里是把图片和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(); //绘制结束以后，恢复画笔状态
 }   
    
 setInterval(draw, 1000);
 
/script>    
/body>
/html>

效果图：

由于是动态的，看不出效果，抱歉。

 摘自 冯小卫

移动
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()也只会影响移动后绘制的图形，对已经绘制到画布中的图形无效。

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

!DOCTYPE HTML>  
html>  
body>  
canvas id="canvas" width="600"height="400">      
         p> Your browserdoes not support the canvas element!/p>      
/canvas>      
      
script type="text/javascript">      
    var canvas =document.getElementById("canvas");      
    var context2D =canvas.getContext("2d");   
    var pic = new Image();   
    pic.src ="milaoshu.jpg";   //注意目录结构，这里是把图片和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(); //绘制结束以后，恢复画笔状态 
    }          
      
    setInterval(draw, 1000);  
      
/script>      
/body>  
/html>  
!DOCTYPE HTML>
html>
body>
canvas id="canvas" width="600"height="400">    
         p> Your browserdoes not support the canvas element!/p>    
/canvas>    
    
script type="text/javascript">    
 var canvas =document.getElementById("canvas");    
 var context2D =canvas.getContext("2d");
 var pic = new Image();
 pic.src ="milaoshu.jpg";   //注意目录结构，这里是把图片和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(); //绘制结束以后，恢复画笔状态
 }   
    
 setInterval(draw, 1000);
 
/script>    
/body>
/html>

效果图：

由于是动态的，看不出效果，抱歉。

 摘自 冯小卫

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！