利用HTML5的canvas制作万花筒动画特效

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <style>
 5   #canvas{
 6            background-color:#cccccc;
 7          
 8      }
 9 style>
10 <script>
11 window.onload=function(){
12    var canvas=document.getElementById("canvas");
13    var cobj=canvas.getContext("2d");
14    // var num=150;
15     var arr=[];
16     //var angle=0;
17     setInterval(function(){
18     cobj.clearRect(0,0,600,600);
19          for(var i=0;i<arr.length;i++)
20          {
21              
22             cobj.save();
23           cobj.translate(300,300);
24           cobj.scale(arr[i].scale,arr[i].scale);
25          cobj.rotate(arr[i].angle*Math.PI/180);//旋转时的圆心为定义旋转前画布的原点位置,后面更改了原点的位置只影响到后面的绘制,下面的矩形就是原点在(50,50)地方的,而旋转的圆心在(100,100)处
26          cobj.beginPath();
27          cobj.fillStyle=arr[i].color;
28          cobj.rect(arr[i].num,arr[i].num,30,30);
29          cobj.fill();
30         cobj.restore();
31          }
32        
33        
34 },60)
35     setInterval(function(){
36         for(var i=0;i<arr.length;i++)
37         {
38          if( arr[i].num<=0)
39           {
40              arr.splice(i,1);//删掉当前元素;
41              continue;//同时退出本次循环
42              
43           }
44           //变化过程中的储存的设置很重要,如果变化的储存没有设置好则有可能会达不到效果
45           arr[i].angle+=2;
46           arr[i].num-=0.2;
47           arr[i].scale-=0.002;
48           if(arr[i].scale<=0.2)
49             arr[i].scale=0.2;
50         }
51          
52     },60)
53    setInterval(function(){
54         var rect={angle:0,num:150,scale:1,color:"rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"} ;
55         arr.push(rect);
56    },1000)
57    
58    }
59    script>
60 head>
61 <body>
62 <canvas id="canvas" width=600px height=600px>
63 您的浏览器已经过期了!
64 canvas>
65 
66 body>
67 html>

 

你可能感兴趣的:(HTML5)