canvas 实现下雨和烟花效果

下雨效果

下雨原文参考链接

 // 该段代码实现鼠标移动时重新计算雨滴偏移量 并记录鼠标坐标
 window.onmousemove = (e) => {
     rain.state.offsetX = parseFloat((e.clientX - width/2)/50);
     rain.state.mousePos = [e.clientX, e.clientY];
 }
 // 绘制溅射雨滴时，加上偏移量
  ctx.beginPath();
  ctx.arc(e.x, e.y, 3, Math.random() * Math.PI * 2, 1 * Math.PI);
  ctx.stroke();
  e.x = e.x + offsetX * Math.random()*3;
  e.vy = e.vy + 0.5; // e.vy 是一个负数 此处为了实现先上升后下降效果
  e.y = e.y + e.vy;
  if (e.y > height) {
      dropList.splice(index, 1);
  }

烟花效果

// 绘制烟花上升时拖尾效果
FireWorks.prototype.drawTail = function(e) {
    const { ctx } = this;
    ctx.beginPath();
    const gra = ctx.createLinearGradient(e.x, e.y, e.x, e.y + 40);
    // 线性渐变
    gra.addColorStop(0, `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, 1`);
    gra.addColorStop(0.25, `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, 0.75`);
    gra.addColorStop(0.5, `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, 0.5`);
    gra.addColorStop(0.75, `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, 0.25`);
    gra.addColorStop(1, `rgba(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b}, 0`);
    ctx.fillStyle = gra;
    ctx.fillRect(e.x - e.radius + 1, e.y, 2 * e.radius - 2, 40);
}

烟花爆炸时会先生成3圈环形爆炸物，根据正弦定理算出每个点的坐标，我这里是按15度来均分
const posx = e.radius * 0.5 * a * Math.sin(15 * i * 2 * Math.PI / 360); // 根据度数计算x坐标
const posy = e.radius * 0.5 * a * Math.cos(15 * i * 2 * Math.PI / 360); // 根据度数计算y坐标

// 初始化烟花碎屑
FireWorks.prototype.initBloom = function(e) {
    const { bloomList, getRgb } = this;
    for(let a=1;a<4;a++) {
        for (let i = 0; i < 7; i++) {
            const posx = e.radius * 0.5 * a * Math.sin(15 * i * 2 * Math.PI / 360); // 根据度数计算x坐标
            const posy = e.radius * 0.5 * a * Math.cos(15 * i * 2 * Math.PI / 360); // 根据度数计算y坐标
            bloomList.push({
                x: e.x - posx,
                y: e.y - posy,
                speedx: parseInt(Math.random() * 10) - 5,
                speedy: parseInt(Math.random() * 3) - 6,
                opacity: 1,
                rgb: getRgb()
            })
            bloomList.push({
                x: e.x - posx,
                y: e.y + posy,
                speedx: parseInt(Math.random() * 10) - 5,
                speedy: parseInt(Math.random() * 3) - 6,
                opacity: 1,
                rgb: getRgb()
            })
            bloomList.push({
                x: e.x + posx,
                y: e.y - posy,
                speedx: parseInt(Math.random() * 10) - 5,
                speedy: parseInt(Math.random() * 3) - 6,
                opacity: 1,
                rgb: getRgb()
            })
            bloomList.push({
                x: e.x + posx,
                y: e.y + posy,
                speedx: parseInt(Math.random() * 10) - 5,
                speedy: parseInt(Math.random() * 3) - 6,
                opacity: 1,
                rgb: getRgb()
            })
        }
    }
}

github 代码地址