canvas实现粒子时钟效果

下面是“canvas实现粒子时钟效果”的完整攻略：

步骤一：设置画布

首先需要在HTML文件中添加一个canvas标签，并设置其宽高。如下面的示例代码所示：

<canvas id="canvas" width="600" height="600"></canvas>

接着，在JavaScript文件中获取该canvas、创建一个画布对象并获取画布的上下文。并且设置画布的背景色。代码如下：

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);

步骤二：定义粒子

接下来，定义粒子对象和粒子数组。粒子由以下属性构成：x坐标、y坐标、半径、速度、颜色。示例代码如下：

function Particle(x, y, radius, speed, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.speed = speed;
  this.color = color;
}

var particleArray = [];

步骤三：绘制粒子

接下来，通过绘制圆形的方法，将粒子绘制到canvas中。示例代码如下：

function drawParticle(particle) {
  context.beginPath();
  context.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI, false);
  context.fillStyle = particle.color;
  context.fill();
}

步骤四：更新粒子

给每一个粒子设置一个更新函数，通过改变x、y坐标使其在画布上运动。并且可以调整更新速度和碰撞墙壁的反弹等逻辑。示例代码如下：

Particle.prototype.update = function(canvas) {
  this.x += this.speed.x;
  this.y += this.speed.y;

  if (this.x - this.radius <= 0 || this.x + this.radius >= canvas.width) {
    this.speed.x = -this.speed.x;
  }
  if (this.y - this.radius <= 0 || this.y + this.radius >= canvas.height) {
    this.speed.y = -this.speed.y;
  }
};

步骤五：实例化并且绘制粒子

现在已经可以开始创建粒子对象并向数组中填充。在绘制过程中，需要每次清空画布再重新绘制已经更新的每个粒子。并且绘制数字为时间，粒子的颜色随机生成。示例代码如下：

for (var i = 0; i < 60; i++) {
  var radius = 5;
  var speed = {x: Math.random() - 0.5, y: Math.random() - 0.5};
  var color = randomColor();
  var particle = new Particle(canvas.width/2, canvas.height/2, radius, speed, color);
  particleArray.push(particle);
}

function draw() {
  context.fillStyle = "black";
  context.fillRect(0, 0, canvas.width, canvas.height);

  var date = new Date();
  var hour = date.getHours();
  var minute = date.getMinutes();
  var second = date.getSeconds();

  var timeArray = [hour, minute, second];

  for (var i = 0; i < timeArray.length; i++) {
    var digit = timeArray[i].toString().split("");

    var x = canvas.width/2 - 150 + i * 100;
    var y = canvas.height/2 + 50;

    for (var j = 0; j < digit.length; j++) {
      var index = digit[j];
      var particle = particleArray[Math.floor(Math.random() * particleArray.length)];

      drawParticle(particle);
      particle.x = x + j * 30 + Math.random() * 10;
      particle.y = y + Math.random() * 10;
      particle.color = randomColor();
      particle.update(canvas);
    }
  }
  requestAnimationFrame(draw);
}

draw();

function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
}

示例说明

上述代码已经足够实现时钟粒子效果了。接下来，给出两个示例说明：

示例一：修改粒子半径和数量

如果要修改粒子的半径和数量，可以调整for循环中的i和radius参数。代码如下：

for (var i = 0; i < 100; i++) {
  var radius = 10;
  var speed = {x: Math.random() - 0.5, y: Math.random() - 0.5};
  var color = randomColor();
  var particle = new Particle(canvas.width/2, canvas.height/2, radius, speed, color);
  particleArray.push(particle);
}

示例二：修改粒子的运动速度

如果要修改粒子的运动速度，可以在Particle.prototype.update函数中修改坐标增加的速度参数。代码如下：

Particle.prototype.update = function(canvas) {
  this.x += this.speed.x * 2; // 增加这行代码，即可将运动速度加倍
  this.y += this.speed.y * 2;

  if (this.x - this.radius <= 0 || this.x + this.radius >= canvas.width) {
    this.speed.x = -this.speed.x;
  }
  if (this.y - this.radius <= 0 || this.y + this.radius >= canvas.height) {
    this.speed.y = -this.speed.y;
  }
};

以上就是canvas实现粒子时钟效果的完整攻略了。