Canvas粒子效果，让我们复习一下基本操作

效果图

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

最后

本文到此结束，希望以上内容对你有些许帮助，如若喜欢请记得点个赞跟关注哦

image

微信公众号「前端宇宙情报局」，将不定时更新最新、实用的前端技巧/技术性文章，欢迎关注，一起学习