2019-03-19
有一段时间没有更新了,前几天学习ES6的时候跟着教程做了个绚丽小球,这里是项目地址, 演示地址.
这个项目蛮简单的,主要思路就是创建一个小球类class Ball{}
以及子类class MoveBall{}
,通过监听鼠标移动在canvas上绘制随机颜色的小球,并向随机方向移动.
在这里我们创建一个小球类Ball
,拥有位置,颜色,半径三个属性以及一个绘制方法render()
//创建类
class Ball {
// 构造器
constructor(posX, posY, color) {
this.x = posX;
this.y = posY;
this.color = color;
this.r = 40; //半径radius
}
// 绘制
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();
}
}
创建一个类MoveBall{}
继承于Ball{}
,这样它就拥有了小球的属性以及方法,接下来添加移动方向的属性使其可以随即方向移动以及方法upDate()
用来更新属性.
class MoveBall extends Ball {
constructor(posX, posY, color) {
super(posX, posY, color); //调用父类属性
//量的变化
this.dX = Math.random() * 10 - 5 // dX:deltaX,x的增量
this.dY = Math.random() * 10 - 5
this.dR = Math.random() * 2 + 1
}
upDate() {
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if (this.r < 0) {
this.r = 0;
}
}
}
通过eventListener来监听鼠标移动事件mousemove
,在鼠标移动时创建小球,通过一个数组ballArr
存放小球的数据,以及在颜色数组colorArr
中随机抽取颜色作为小球的颜色.
let ballArr = [];
let colorArr = ['red', 'green', 'yellow', 'purple', 'blue', 'pink', 'orange'];
//监听鼠标移动
canvas.addEventListener('mousemove', function (e) {
ballArr.push(
new MoveBall(e.offsetX, e.offsetY, colorArr[Math.floor(Math.random() * (colorArr.length - 1))])
);
});
创建一个计数器来刷新画布以及绘制小球,否则所有生成的小球会黏在一起并且不会有动作.
setInterval(function () {
//清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
//绘制
for (let i = 0; i < ballArr.length; i++) {
ballArr[i].render(); //渲染
ballArr[i].upDate(); //更新
if (ballArr[i].r === 0) {
ballArr.splice(i, 1);
}
}
},50);
这里注意如果不进行冗余处理的话小球数组ballArr
会越来越大,所以在这里我会删掉半径为0的项.
这样,一个通过ES6面向对象的方式制作的绚丽小球就完成了.