欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 Canvas 移动

程序员文章站 2022-03-13 14:20:29
移动 context对象可以通过调用translate()方法来移动canvas画布中坐标原点的位置。translate()方法的原型如下: void translate(x, y); 用于将...

移动
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 Canvas 移动

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

 摘自 冯小卫