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>
