初学者也能学会Canvas来实现代码雨特效

2023-11-11 17:33:58

初学者如何使用Canvas实现代码雨效果

相信很多刚入门的程序员都见过代码雨的效果。这次，我们将使用画布自行实现一个，方法很简单，不要被吓倒，我们一起来学习！

基本原理

代码雨效果的实现原理很简单。首先，我们创建一个画布元素，然后使用JavaScript在画布上绘制一组字符。接下来，我们让这些字符从画布的顶部落下，就像雨点一样。为了让效果更逼真，我们还可以添加一些随机性，让字符下落的速度和方向有所不同。

实现步骤

创建画布元素

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

获取画布上下文

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

创建字符数组

const chars = [
  "a", "b", "c", "d", "e", "f", "g", "h", "i", "j",
  "k", "l", "m", "n", "o", "p", "q", "r", "s", "t",
  "u", "v", "w", "x", "y", "z", "0", "1", "2", "3",
  "4", "5", "6", "7", "8", "9",
];

绘制字符

ctx.font = "20px Arial";
ctx.fillStyle = "green";
ctx.textAlign = "center";

for (let i = 0; i < 100; i++) {
  const char = chars[Math.floor(Math.random() * chars.length)];
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  ctx.fillText(char, x, y);
}

让字符落下

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < 100; i++) {
    const char = chars[Math.floor(Math.random() * chars.length)];
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    ctx.fillText(char, x, y);

    y += 1;

    if (y > canvas.height) {
      y = 0;
    }
  }

  requestAnimationFrame(update);
}

update();