利用ES6的class类继承实现绚丽小球效果

绚丽小球

　　　　　本效果采用Canvas画布绘制，再利用class继承实现，实现的效果鼠标在指定Canvas位置移动，会在当前鼠标的位置产生随机颜色的小球，之后小球会慢慢消失，话不多说，直接上代码。

　　html代码结构：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>绚丽小球</title>
 7     <style>
 8         #canvas{
 9             margin-left: 100px
10         }
11     </style>
12 </head>
13 <body>
14     <canvas id="canvas">你的浏览器不支持canvas</canvas>
15 
16     <!-- <script src="./underscore-min.js"></script>  -->
17     <!-- underscore 中已有封装好的  _.random函数，引入就可以不用再手动写随机函数 -->
18     <script src="./index.js"></script>
19 </body>
20 </html>

　　

　　js脚本代码：

　　// index.js
 1 // 1、获取当前的画布
 2 const canvas = document.getElementById('canvas');
 3 const ctx = canvas.getContext('2d');
 4 
 5 // 设置画布的大小样式
 6 canvas.width = 1000;
 7 canvas.height = 600;
 8 canvas.style.backgroundColor = '#000'
 9 
10 // 2、小球类
11 class Ball {
12     constructor (x, y, color) {
13         this.x = x;   // x轴
14         this.y = y;   // y轴
15         this.color = color;   // 小球的颜色
16         this.r = 40;   // 小球的半径
17     }
18 
19     // 绘制小球
20     render () {
21         ctx.save();
22         ctx.beginPath();
23         ctx.arc(this.x, this.y, this.r , 0, Math.PI * 2);
24         ctx.fillStyle = this.color;
25         ctx.fill();
26         ctx.restore();
27     }
28 
29 }
30 
31 // 3、会移动小球的类
32 class MoveBall extends Ball { // 继承
33     constructor (x, y, color) {
34         super(x, y, color);
35 
36         // 量的变化  
37         // 小球的随机坐标
38         this.dX = Random(-5, 5);
39         this.dY = Random(-5, 5);
40         // 半径变小的随机数
41         this.dR = Random(1, 3);
42     }
43 
44     // 4、改变小球的位置和半径
45     upDate () {
46         this.x += this.dX;
47         this.y += this.dY;
48         this.r -= this.dR;
49         // 判断小球的半径是否小于0
50         if(this.r < 0) {
51             this.r = 0
52         }
53     }
54 
55 }
56 
57 // 5、实例化小球
58 
59 // 存放产生的小球
60 let ballArr = [];
61 
62 // 定义随机函数  如果引用了underscore-min.js 就不用写随机函数，可以直接用  _.random
63 let Random = (min, max) => {
64     return Math.floor(Math.random() * (max - min) + min);
65 }
66 
67 // 监听鼠标的移动
68 canvas.addEventListener('mousemove', function (e){
69     // 随机颜色 
70     // 也可以固定颜色数组 let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
71     // bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
72     let bgColor =  `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
73     ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
74     console.log(ballArr);
75 })
76 
77 // 开启定时器 
78 setInterval(function () {
79 
80     // 清屏
81     ctx.clearRect(0, 0, canvas.width, canvas.height);
82 
83     // 绘制小球
84     for (let i = 0 ; i < ballArr.length; i++ ) {
85         ballArr[i].render();
86         ballArr[i].upDate();
87     }
88 }, 50);

 

　　效果图：

　　  是不是感觉很酷炫呢？快动动你发财的下手操作起来吧~~~ 如果感觉还不错的话，给在下点点赞呗~ ^_^

 

posted @ 2020-09-12 14:32  Amerys  阅读(222)  评论(0)    收藏  举报