码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-26 12:24:28      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

 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的canvas制作万花筒动画特效

标签:

原文地址:http://www.cnblogs.com/heshan1992/p/5434313.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!