本文主要实现一个 随鼠标移动随机产生颜色不一的小球并逐渐消失 的效果。
主要使用了canvas画布和ES6中的class语法糖（构造函数）。
还封装了一个MyRandom用于随机取n到m之间的随机数，包括n和m。
详细请见JS实现使用Math.random()函数生成n到m间的随机数字
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 150px;
}
#canvas{
box-shadow: 0 0 10px #000;
}
</style>
</head>
<body>
<canvas id="canvas">当前的浏览器不支持该版本!</canvas>
<script>
//封装Math.random()函数
function MyRandom(n, m) {
//取n到m的随机数, [n, m]
return Math.round(Math.random()*(m-n)+n);
}
// 1. 获取当前的画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000';
// 2.小球类
class Ball{
/**
* 构造器
*/
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}
/**
* 绘制小球
*/
render(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
// 3.会移动的小球类
class MoveBall extends Ball{
constructor(x, y, color){
super(x, y, color);
// 量的变化
this.dX = MyRandom(-5,5);
this.dY = MyRandom(-5,5);;
this.dR = MyRandom(1,3);
}
upDate(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
}
// 4. 实例化小球
let ballArr = [];
let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];
// 5. 监听鼠标的移动
canvas.addEventListener('mousemove', function (e) {
ballArr.push( new MoveBall(e.offsetX, e.offsetY, colorArr[MyRandom(0,colorArr.length-1)]));
// console.log(ballArr);
});
// 6.开启定时器
setInterval(function () {
// 清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制
for(let i=0; i<ballArr.length; i++){
ballArr[i].render();
ballArr[i].upDate();
}
}, 50);
</script>
</body>
</html>
效果图：
觉得有帮助的小伙伴右上角点个赞~
