js粒子效果

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

class Particle {
  constructor(x, y) {
    this.x = Math.random()*w;
    this.y = Math.random()*h;
    this.vx = Math.random()*5;
    this.vy = Math.random()*-0.5;
    this.hue = Math.random()*260;
    this.tick = 80;
  }
  move() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += 0.05;
    this.tick -= 1;
  }
  draw() {
    ctx.fillStyle = `hsla(${this.hue}, 100%, 50%, 0.5)`;
    ctx.beginPath();
    ctx.arc(this.x, this.y, 3, 0, Math.PI*2);
    ctx.fill();
  }
}

let canvas;
let ctx;
let w, h;
let particles;
let spawnrate;

function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  reset();
  particles = [];
  window.addEventListener("resize", reset);  
}

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  spawnrate = w*h/1000000; 
}

setup();
draw();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg