canvas红包雨学习笔记

Canvas红包雨是一种基于HTML5 Canvas技术开发的节日效果，通过JavaScript控制红包的下落和动画效果，实现一个红包雨的动态效果。

下面是Canvas红包雨的开发流程：

1. HTML页面中添加Canvas画布，并设置画布的宽高和样式。

<canvas id="canvas"></canvas>

#canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

2. 在JavaScript中获取Canvas画布对象，并设置画布的宽高。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3. 定义红包对象，包括红包的位置、速度、大小和颜色等属性。

function RedPacket(x, y, vx, vy, size, color) {
  this.x = x;
  this.y = y;
  this.vx = vx;
  this.vy = vy;
  this.size = size;
  this.color = color;
}

4. 在Canvas画布上绘制红包，并实现红包的下落和动画效果。

var redPackets = [];  // 存储红包对象的数组

function drawRedPacket(redPacket) {
  ctx.beginPath();
  ctx.arc(redPacket.x, redPacket.y, redPacket.size, 0, 2 * Math.PI);
  ctx.fillStyle = redPacket.color;
  ctx.fill();
}

function updateRedPacket(redPacket) {
  redPacket.x += redPacket.vx;
  redPacket.y += redPacket.vy;
  redPacket.vy += gravity;
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < redPackets.length; i++) {
    drawRedPacket(redPackets[i]);
    updateRedPacket(redPackets[i]);
  }
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

5. 实现红包的自动生成和动态效果，可以通过setInterval或setTimeout定时调用生成红包的函数。

function createRedPacket() {
  var x = Math.random() * canvas.width;
  var y = -20;
  var vx = Math.random() * 6 - 3;
  var vy = Math.random() * 2 + 2;
  var size = Math.random() * 10 + 10;
  var color = '#' + Math.floor(Math.random() * 16777215).toString(16);  // 随机生成颜色
  var redPacket = new RedPacket(x, y, vx, vy, size, color);
  redPackets.push(redPacket);
}

setInterval(createRedPacket, 500);  // 每500ms生成一个红包

6. 实现红包的点击事件，当用户点击红包时，可以实现红包爆炸效果，并显示红包金额或祝福语。

function explodeRedPacket(redPacket) {
  var particles = [];  // 存储爆炸粒子的数组
  for (var i = 0; i < 20; i++) {
    var particle = {
      x: redPacket.x,
      y: redPacket.y,
      vx: Math.random() * 6 - 3,
      vy: Math.random() * 6 - 3,
      size: Math.random() * 3 + 1,
      color: redPacket.color
    };
    particles.push(particle);
  }
  for (var i = 0; i < particles.length; i++) {
    drawRedPacket(particles[i]);
  }
}

canvas.addEventListener('click', function(event) {
  var x = event.clientX;
  var y = event.clientY;
  for (var i = 0; i < redPackets.length; i++) {
    var redPacket = redPackets[i];
    if (x > redPacket.x - redPacket.size && x < redPacket.x + redPacket.size && y > redPacket.y - redPacket.size && y < redPacket.y + redPacket.size) {
      explodeRedPacket(redPacket);
      redPackets.splice(i, 1);
      break;
    }
  }
});

上述就是Canvas红包雨的开发流程，通过Canvas技术和JavaScript实现红包的下落、动画、自动生成和点击事件等效果，可以增加网站的趣味性和用户互动性。