❤️创意网页：创意动态画布~缤纷移动涂鸦~图片彩色打码

命运之光

发布于 2024-03-20 12:41:24

690

发布于 2024-03-20 12:41:24

介绍

在本篇技术博客中，我们将介绍一个有趣的创意动态画布，它会在页面上绘制出缤纷的移动涂鸦。我们使用 HTML5 的 Canvas 元素和 JavaScript 来实现这个动态效果。每次页面加载时，涂鸦的起点位置和颜色都将随机生成，让每次绘制都成为一个独特的艺术创作。

动态图展示

静态图展示

图片1

图片2

实现思路

首先，我们需要一个用于绘制动画的 Canvas 元素。我们将设置 CSS 样式，使 Canvas 铺满整个页面，并添加背景图片作为画布的底色。
接下来，在 JavaScript 中，我们获取 Canvas 元素和 2D 上下文，以便后续绘制。
我们定义一个方框的大小，并根据页面的宽高计算出在 x 和 y 轴上的方框数量。
为了绘制移动涂鸦，我们使用一个包含颜色信息的对象，以记录每个位置的颜色。
实现一个函数来随机生成颜色，我们将使用这个颜色来绘制方框。
编写绘制方框的函数，该函数接受位置和颜色作为参数，用于在 Canvas 上绘制方框。
创建一个更新画布的函数。在该函数中，我们首先绘制之前记录的位置的颜色信息，然后随机生成一个颜色并绘制当前位置的方框，并将位置和颜色信息记录到颜色对象中。接下来，我们随机生成方框的速度并移动方框。最后，我们进行边界检测，以确保方框不会超出 Canvas 的范围。然后使用 requestAnimationFrame() 函数来循环调用更新函数，实现动画效果。
最后，在页面加载时启动动画，并随机设置方框的初始位置。

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Colorful Moving Doodle</title>
  <style>
    /* 设置整个页面铺满屏幕 */
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    /* 将 Canvas 铺满整个页面 */
     #canvas {
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid black;
      image-rendering: pixelated; /* 确保画布保持像素大小，防止插值处理 */

      /* 添加背景图片设置 */
      background-image: url('background-image.jpg');
      background-size: cover; /* 调整背景图片大小以覆盖整个画布 */
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    // 获取 Canvas 元素和 2D 上下文
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // 设置方框的大小和初始位置
    const boxSize = 5; // 缩小方块的大小
    const numBoxesX = Math.ceil(canvas.width / boxSize);
    const numBoxesY = Math.ceil(canvas.height / boxSize);

    // 存储每个位置的颜色信息
    const colors = {};

    // 随机生成颜色
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    // 绘制方框的函数
    function drawBox(x, y, color) {
      ctx.fillStyle = color;
      ctx.fillRect(x * boxSize, y * boxSize, boxSize, boxSize);
    }

    // 更新方框位置和绘制涂鸦
    function update() {
      // 绘制之前记录的位置颜色信息
      for (const key in colors) {
        if (colors.hasOwnProperty(key)) {
          const [x, y] = key.split('_').map(Number);
          drawBox(x, y, colors[key]);
        }
      }

      // 随机生成一个颜色
      const color = getRandomColor();

      // 绘制方框并记录位置颜色信息
      drawBox(boxX, boxY, color);
      colors[`${boxX}_${boxY}`] = color;

      // 移动方框
      const velocityX = Math.floor(Math.random() * 3) - 1; // 随机生成速度
      const velocityY = Math.floor(Math.random() * 3) - 1;
      boxX += velocityX;
      boxY += velocityY;

      // 边界检测
      if (boxX < 0) {
        boxX = numBoxesX - 1;
      } else if (boxX >= numBoxesX) {
        boxX = 0;
      }
      if (boxY < 0) {
        boxY = numBoxesY - 1;
      } else if (boxY >= numBoxesY) {
        boxY = 0;
      }

      requestAnimationFrame(update);
    }

    // 启动动画
    let boxX = Math.floor(Math.random() * numBoxesX);
    let boxY = Math.floor(Math.random() * numBoxesY);
    update();
  </script>
</body>
</html>