今天继续放上学习时候写的实例之一：万花筒。（主要联系html5的矩阵变换）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ padding:0; margin:0} 8 #can{ background:#EBEBEB} 9 10 </style> 11 12 </head> 13 <body> 14 <canvas id="can" width="900" height="900"></canvas> 15 16 </body> 17 18 <script> 19 20 var canid=document.getElementById("can"); 21 var can=canid.getContext("2d"); 22 var arr=[]; 23 can.translate(400,350); 24 setTim(); 25 function setTim(){ 26 27 var timer=setInterval(function(){ 28 29 can.clearRect(0,0,900,900); 30 for(var i=0;i<arr.length;i++){ 31 32 can.save(); 33 //can.translate(200,200); 34 35 can.rotate(arr[i].x*Math.PI/180); 36 37 can.fillStyle=arr[i].c; 38 can.fillRect(arr[i].y,arr[i].y,arr[i].z,arr[i].z); 39 can.stroke(); 40 can.restore(); 41 42 } 43 44 },60); 45 46 47 } 48 49 50 setInterval(function(){ 51 var color="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"; 52 arr.push({x:0,y:150,z:50,c:color}); 53 54 },50); 55 56 setInterval(function(){ 57 58 59 for(var i=0;i<arr.length;i++){ 60 61 if(arr[i].y<=0){ 62 arr.splice(i,1); 63 continue; 64 } 65 arr[i].x=arr[i].x+3; 66 arr[i].y=arr[i].y-0.3 67 arr[i].z=arr[i].z-0.1; 68 69 70 } 71 72 73 74 },60); 75 76 77 78 </script> 79 80 81 </html>