-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolorful_ball.html
69 lines (69 loc) · 2.67 KB
/
colorful_ball.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas_demo3</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;;
height: 100%;
background: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
<script>
let canvas = document.getElementById('myCanvas'); // 获取Canvas 对象
canvas.width = document.documentElement.clientWidth; // 获取canvas 宽度
canvas.height = document.documentElement.clientHeight; // 获取 canvas 高度
let ctx = canvas.getContext('2d'); // 获取 canvas 上下文
function Ball(x,y) { // 创建Ball 原型
this.x = x; // 小球的 x 坐标
this.y = y; // 小球的 y 坐标
this.r = 60; // 小球的半径
this.color = `rgba(${Math.random()*256},${Math.random()*256},${Math.random()*256},0.7)`; // 小球的颜色
ballArr.push(this); // 将自己推入小球数组
}
let ballArr = []; // 小球数组，定时器循环调用数组内小球的数据更新和渲染方法
Ball.prototype.update=function () { // 给小球增加更新坐标，大小等数据
this.x-=Math.random()*16-9; // 使用随机数，使其出现抖动效果
this.y-=Math.random()*16-9;
this.r -= Math.random(); // 使其大小随机且逐渐缩小
};
Ball.prototype.die =function(){ // 小球自己的移除方法，大小为0 时自动从小球数组中移除
for (let i =0;i<ballArr.length;i++){
if (ballArr[i]===this){
ballArr.splice(i,1);
}
}
};
Ball.prototype.rander=function () { // 小球的渲染方法
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI *2,false);
ctx.fill();
ctx.closePath();
};
canvas.onmousemove=function(event){ // 鼠标滑动时获取鼠标的坐标，并生成新的小球
new Ball(event.clientX+Math.random()*28,event.clientY+Math.random()*28);
};
setInterval(function () { // 定时器循环更新小球的数据并渲染，并将大小为 0 的小球踢出数组
ctx.clearRect(0,0,canvas.width,canvas.height);
ballArr.forEach(e=>{ // 循环小球数组，调用其更新和渲染方法
e.update(); // 更新小球的坐标，大小
if (e.r<0){ // 小球大小为0 ，踢出数组
e.die();
}else{
e.rander(); // 渲染小球
}
});
},20);
</script>
</html>