javascript 粒子,代码示例

JavaScript粒子是指在网页中创建并控制小型元素（粒子），通过改变它们的属性和行为，实现各种动画效果。粒子可以是小圆点、小方块或其他形状，它们可以在页面上自由移动、变化颜色、改变大小等。

下面是一个简单的示例代码，用于创建一个具有随机颜色和位置的粒子，并使其在页面上自由移动：

// 创建一个粒子对象
function Particle() {
  // 随机生成粒子的位置和颜色
  this.x = Math.random() * window.innerWidth;
  this.y = Math.random() * window.innerHeight;
  this.color = getRandomColor();
  // 绘制粒子
  this.draw = function() {
    // 创建一个画布上下文
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // 设置粒子的颜色
    ctx.fillStyle = this.color;
    // 绘制一个小圆点作为粒子
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
  };
  // 更新粒子的位置
  this.update = function() {
    // 随机改变粒子的位置
    this.x += Math.random() * 2 - 1;
    this.y += Math.random() * 2 - 1;
    // 限制粒子的位置在页面范围内
    if (this.x < 0) {
      this.x = 0;
    }
    if (this.x > window.innerWidth) {
      this.x = window.innerWidth;
    }
    if (this.y < 0) {
      this.y = 0;
    }
    if (this.y > window.innerHeight) {
      this.y = window.innerHeight;
    }
  };
}
// 生成一个随机颜色
function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
// 创建粒子数组
var particles = [];
// 初始化粒子数组
for (var i = 0; i < 100; i++) {
  particles.push(new Particle());
}
// 绘制和更新粒子
function animate() {
  // 清除画布
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
  // 遍历粒子数组，绘制和更新每个粒子
  for (var i = 0; i < particles.length; i++) {
    particles[i].draw();
    particles[i].update();
  }
  // 递归调用动画函数，实现连续的动画效果
  requestAnimationFrame(animate);
}
// 调用动画函数开始动画
animate();

以上代码通过创建一个Particle对象来表示一个粒子，每个粒子具有随机的位置和颜色。通过draw()方法绘制粒子，使用canvas的上下文来绘制一个小圆点。通过update()方法更新粒子的位置，通过改变粒子的x和y坐标来实现移动，并限制粒子的位置在页面范围内。通过循环遍历粒子数组，调用draw()和update()方法来绘制和更新每个粒子，然后使用requestAnimationFrame()函数递归调用animate()函数，实现连续的动画效果。