当前位置:编程学习 > html/css >>

HTML5 Canvas 旋转

旋转
与移动一样,Context对象能够调用rotate()方法来按一定的夹角转动Canvas画布。rotate()方法的原型如下:

void rotate(radian);

用于将Canvas画布顺时针转动到与原x轴(横轴)方向成radian角的位置,radian按弧度制,转动后x轴方向同时发生改变。同样,旋转将不会影响到已经绘制的图形但是会影响其它由该Canvas生成的Context对象。

下面的旋转的示例:

 

<!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.rotate(Math.PI/10*Math.random());//开始旋转 
        context2D.drawImage(pic,100, 100); 
        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.rotate(Math.PI/10*Math.random());//开始旋转
  context2D.drawImage(pic,100, 100);
  context2D.restore();//绘制结束以后,恢复画笔状态
 }  
    
 setInterval(draw, 1000);
 
</script>   
</body>
</html>

效果如图:

 \

补充:

缩放
Context对象可以调用scale()方法来控制Canvas在x轴和y轴方向上的缩放比例。scale()方法的原型如下:

void scale(x, y);

其中x、y分别表示在x轴和y轴上的缩放比例,必须是正数。同translate()与rotate()一样,scale也是对整个Canvas对象的改变,但是不会影响已经绘制的图形

由于缩放非常简单,就不单独做demo了。

 摘自 冯小卫
 

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,