html5学习-万花筒

最新推荐文章于 2021-09-08 07:24:07 发布

weixin_30670925

最新推荐文章于 2021-09-08 07:24:07 发布

阅读量286

点赞数

原文链接：http://www.cnblogs.com/chaoming/p/3414461.html

版权

今天继续放上学习时候写的实例之一：万花筒。（主要联系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>

转载于:https://www.cnblogs.com/chaoming/p/3414461.html

weixin_30670925

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5学习-万花筒

今天继续放上学习时候写的实例之一：万花筒。（主要联系html5的矩阵变换） 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"&...
复制链接

扫一扫