html5 雨滴效果,html5 canvas下雨滴掉落动画特效

特效描述：html5 canvas 雨滴掉落动画 动画特效。html5 canvas绘制下雨场景动画。雨滴动画。

代码结构

1. 引入JS

2. HTML代码

// TO DO

// Remove rain drops and splats proportionally to the frame rate

class Particle {

constructor(x, y, vx, vy) {

this.pos = createVector(x, y);

this.vel = createVector(vx, vy);

this.acc = createVector(0, -0.1);

this.radius = 2;

}

draw() {

noStroke();

fill(255);

ellipse(this.pos.x, height - this.pos.y, this.radius);

}

update() {

this.vel.add(this.acc);

this.pos.add(this.vel);

}

}

class RainSplat {

constructor(rainDrop) {

this.splat = [];

const total = 12; //rainDrop.length / 3;

for (let i = 0; i < total; i++) {

const x &