canvas动画

最新推荐文章于 2025-07-24 16:25:41 发布

原创最新推荐文章于 2025-07-24 16:25:41 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

html5

1 篇文章

订阅专栏

本文详细介绍了如何使用canvas实现动画效果，包括准备元素、绘制动画和交互操作等关键步骤。

canvas就像一个画板你画的每个东西都在一个板上没有元素的概念.canvas动画就是不断的重绘来实现的，也就是动画的每一帧都是一幅静态的图片。

其实canvas动画无外乎三个步骤：

1.准备要画的元素及其位置颜色等等....

2.用一个定时器不断改变元素的一些属性如位置

3.再用一个定时器清除画布，画变化中的元素

1.开始准备元素

/**画星星**/
    function dragStar(a,b,ctx,r1,r2){
        ctx.beginPath();
        ctx.fillStyle="#f8b203";
        for(var i=0;i<5;i++){
           ctx.lineTo(a+r2*Math.cos((18+i*72)*Math.PI/180),b-r2*Math.sin((18+i*72)*Math.PI/180));
           ctx.lineTo(a+r1*Math.cos((54+i*72)*Math.PI/180),b-r1*Math.sin((54+i*72)*Math.PI/180));
         }
         ctx.closePath();
         ctx.fill();
    };   

    /**画围绕圆的星星**/ 
    function dragCicle(x,y,R,radio){
      var max = 5+radio,angle = 360/max;
      for(var j=0;j<max;j++){
         var X =x + R*Math.cos(j*angle*Math.PI/180);
         var Y =y - R*Math.sin(j*angle*Math.PI/180);
         dragStar(X,Y,ctx,10+2*radio,5+1*radio);
      }
    };

2.绘制动画（因为这里是整个画面的动画所以没有第二步）

(function(){
      iNumber++;
      ctx.clearRect(0,0,oc.width,oc.height);
      ctx.save();
      ctx.transform(1,angleX,angleY,1,600,280);
      ctx.rotate(iNumber*Math.PI/180);
      for(var m=0;m<6;m++){
        dragCicle(0,0,20+m*40,m);
      }
      ctx.restore();
      animateCallBack(arguments.callee);
    })();

3.交互

oc.onmousemove=function(ev){
        var x = ev.clientX - oc.offsetLeft;
        var y = ev.clientY - oc.offsetTop;
        if(x>600){
          angleX=0.5;
        }else{
          angleX=-0.5;
        }

        if(y>280){
          angleY=0.5;
        }else{
          angleY=-0.5;
        }
    };

到这里就完成了整个动画，你可以复制代码看效果

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动画实现</title>
<style>
  body{
  	background: #fff;
  }
  #canvas{
  	background: #fff;
  }
</style>
<script>
  window.onload=function(){
  	var oc = document.getElementById("canvas"),
    ctx = oc.getContext("2d"),
    number = 0,star = [];
    var animateCallBack = (window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||
      window.msRequestionFrame||
      function(callback){return window.setTimeout(callback,100/60);}),iNumber=0,angleX=0,angleY=0;
    
    /**画星星**/
    function dragStar(a,b,ctx,r1,r2){
        ctx.beginPath();
        ctx.fillStyle="#f8b203";
        for(var i=0;i<5;i++){
           ctx.lineTo(a+r2*Math.cos((18+i*72)*Math.PI/180),b-r2*Math.sin((18+i*72)*Math.PI/180));
           ctx.lineTo(a+r1*Math.cos((54+i*72)*Math.PI/180),b-r1*Math.sin((54+i*72)*Math.PI/180));
         }
         ctx.closePath();
         ctx.fill();
    };   

    /**画围绕圆的星星**/ 
    function dragCicle(x,y,R,radio){
      var max = 5+radio,angle = 360/max;
      for(var j=0;j<max;j++){
         var X =x + R*Math.cos(j*angle*Math.PI/180);
         var Y =y - R*Math.sin(j*angle*Math.PI/180);
         dragStar(X,Y,ctx,10+2*radio,5+1*radio);
      }
    };

    (function(){
      iNumber++;
      ctx.clearRect(0,0,oc.width,oc.height);
      ctx.save();
      ctx.transform(1,angleX,angleY,1,600,280);
      ctx.rotate(iNumber*Math.PI/180);
      for(var m=0;m<6;m++){
        dragCicle(0,0,20+m*40,m);
      }
      ctx.restore();
      animateCallBack(arguments.callee);
    })();

    oc.onmousemove=function(ev){
        var x = ev.clientX - oc.offsetLeft;
        var y = ev.clientY - oc.offsetTop;
        if(x>600){
          angleX=0.5;
        }else{
          angleX=-0.5;
        }

        if(y>280){
          angleY=0.5;
        }else{
          angleY=-0.5;
        }
    };
    
}
</script>
</head>

<body>
<div id="div1">
	<canvas id="canvas" width="1360" height="800"></canvas>
</div>

</body>
</html>