当前位置： 移动技术网 > IT编程>网页制作>Html5 > 画布旋转——HTML5之特效

画布旋转——HTML5之特效

2018年09月12日  | 移动技术网IT编程  | 我要评论

translate.html内容如下：


[html] 
<!doctype html>  
<html> 
<head> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="translate.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
 
}); 
</script> 
</head> 
<body> 
<canvas id="simple"></canvas> 
</body> 
</html>  

<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="translate.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});
</script>
</head>
<body>
<canvas id="simple"></canvas>
</body>
</html>

translate.js代码如下：


[javascript]
(function(){ 
    var canvas=null, 
    context=null, 
    angle=0; 
    function resetcanvas(){ 
        canvas=document.getelementbyid("simple"); 
        canvas.width=window.innerwidth; 
        canvas.height=window.innerheight; 
        context=canvas.getcontext("2d"); 
    } 
    function animate(){ 
        context.save(); 
        try{ 
            //清除画布  
            context.clearrect(0, 0, canvas.width, canvas.height); 
            //设置原点  
            context.translate(canvas.width * 0.5, canvas.height * 0.5); 
            //旋转角度  
            context.rotate(angle); 
            //设置填充颜色  
            context.fillstyle = "#ff0000"; 
            //绘制矩形  
            context.fillrect(-30, -30, 60, 60); 
            angle += 0.05 * math.pi; 
        } 
        finally{ 
            context.restore(); 
        } 
    } 
    $(window).bind("resize",resetcanvas).bind("reorient",resetcanvas); 
    $(document).ready(function(){ 
        window.scrollto(0,1); 
        resetcanvas(); 
        setinterval(animate,40); 
    }); 
})(); 

(function(){
 var canvas=null,
 context=null,
 angle=0;
 function resetcanvas(){
  canvas=document.getelementbyid("simple");
  canvas.width=window.innerwidth;
  canvas.height=window.innerheight;
  context=canvas.getcontext("2d");
 }
 function animate(){
  context.save();
  try{
   //清除画布
   context.clearrect(0, 0, canvas.width, canvas.height);
   //设置原点
   context.translate(canvas.width * 0.5, canvas.height * 0.5);
   //旋转角度
   context.rotate(angle);
   //设置填充颜色
   context.fillstyle = "#ff0000";
   //绘制矩形
   context.fillrect(-30, -30, 60, 60);
   angle += 0.05 * math.pi;
  }
  finally{
   context.restore();
  }
 }
 $(window).bind("resize",resetcanvas).bind("reorient",resetcanvas);
 $(document).ready(function(){
  window.scrollto(0,1);
  resetcanvas();
  setinterval(animate,40);
 });
})();
用支持hmtl5的打开translate.html就可以看到一个旋转的红色方块

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网