效果图
dot.gif
代码
dot.js
/*
* @Author: likang xie
* @Date: 2018-05-23 16:01:21
* @Purpose: Dot粒子类
*/
class Dot {
constructor(x, y, vx, vy) {
this.x = x; // x坐标
this.y = y; // y坐标
this.vx = vx; // x速度
this.vy = vy; // y速度
this.size = Math.ceil(Math.random() * 2); // 随机大小
this.speed = 1; // 整体定时器的帧率,越大越快
}
// 初始化粒子
render() {
ctx.save();
ctx = ctx;
ctx.beginPath();
ctx.fillStyle = 'lightgray';
ctx.arc(this.x - this.size / 2, this.y - this.size / 2, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.restore();
}
// 更新粒子(坐标位置)
update() {
this.x = this.x + this.vx * this.speed;
this.y = this.y + this.vy * this.speed;
this.vx = (this.x < canvas.width && this.x > 0) ? this.vx : (-this.vx);
this.vy = (this.y < canvas.height && this.y > 0) ? this.vy : (-this.vy);
this.render();
}
}
dot.html
dot
最后
本文到此结束,希望以上内容对你有些许帮助,如若喜欢请记得点个赞
跟关注
哦
![](http://img.e-com-net.com/image/info10/55dcf823db57417ab12068e749889f12.gif)
image
微信公众号
「前端宇宙情报局」
,将不定时更新最新、实用的前端技巧/技术性文章,欢迎关注,一起学习