利用HTML5的canvas製作萬花筒動畫特效
阿新 • • 發佈：2019-02-05
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>