用JavaScript编写气泡 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         /* #cs {
11             border: 1px solid rebeccapurple;
12         } */
13     </style>
14 </head>
15 
16 <body>
17     <canvas id="cs" width="1200" height="600"></canvas>
18 
19     <script>
20         window.onload = function () {
21             let cs = document.getElementById('cs');
22             let ab = cs.getContext('2d');
23             function random(min, max) {
24                 return parseInt(Math.random() * (max - min + 1) + min);
25             }
26             class Bubble {
27                 constructor() {
28                     this.x = random(50, 950);
29                     this.y = random(50, 550);
30                     this.r = 50;
31                     this.color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
32                     this.scale = 1;//放大缩小的比列
33                     this.direct = 1;//放大缩小的方向
34                     this.step = random(1, 10) / 500;//放大缩小的速率
35                 }
36                 draw() {
37                     if (this.scale < 0) {
38                         this.direct = 1;
39                     } else if (this.scale > 1) {
40                         this.direct = -1;
41                     }
42                     this.scale += this.step * this.direct;
43                     ab.save();//保存转换状态
44                     ab.beginPath();//一个新的路径
45                     ab.translate(this.x, this.y);
46                     ab.scale(this.scale, this.scale);//开始放大缩小
47                     ab.arc(0, 0, this.r, 0, 2 * Math.PI);
48                     ab.fillStyle = this.color;//背景颜色          
49                     ab.globalAlpha = this.scale;//透明
50                     ab.fill();
51                     ab.restore();//恢复画布原点
52                 }
53             }
54            let arr=[];//创建空数组
55            for(let i=0;i<50;i++){
56                arr.push(new Bubble());//添加数组
57            }
58            setInterval(function(){
59                ab.clearRect(0,0,1000,600);//清除之前的内容
60                 for(let bum of arr){//遍历数组
61                     bum.draw();
62                 }
63            },50)
64             
65         }
66     </script>
67 </body>
68 
69 </html>

 

posted @ 2018-06-18 14:54  YKmaster  阅读(735)  评论(0)    收藏  举报