如何用 JavaScript 实现网页画布的“涂鸦+自动擦除”动画效果-html教程-PHP中文网

如何用 JavaScript 实现网页画布的“涂鸦+自动擦除”动画效果

本文详解如何使用 canvas 和 requestanimationframe 构建一个实时涂鸦并自动淡出/擦除的视觉效果，核心在于维护有限长度的点坐标队列，并逐帧重绘最新轨迹。

本文详解如何使用 canvas 和 requestanimationframe 构建一个实时涂鸦并自动淡出/擦除的视觉效果，核心在于维护有限长度的点坐标队列，并逐帧重绘最新轨迹。

要实现类似 Bornfight Studio 首页那种流畅、有呼吸感的“手绘线条自消失”动画（即鼠标移动时生成线条，旧线条随新轨迹不断被裁剪、自然隐去），关键不在于逐像素擦除，而在于时间维度上的轨迹截断与帧间重绘——这是一种轻量、高性能且视觉可控的模拟方案。

核心原理：FIFO 点序列 + 帧循环渲染

与传统“画一笔、留一笔”的方式不同，本方案采用「固定长度滑动窗口」策略：

每次 mousemove 事件捕获当前鼠标坐标，推入 pointList 数组；
若数组长度超过预设阈值（如 TOTAL_ALLOWED_POINTS = 10），则移除最早插入的点（shift()）；
requestAnimationFrame 驱动的 renderPoints() 每帧清空画布，并仅连接当前 pointList 中所有点，形成连续折线。

这样，线条天然呈现“尾部渐隐”的拖尾感——并非真正淡出（opacity 动画），而是因旧点被剔除、新点持续加入，视觉上产生动态消散效果。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

完整可运行代码示例



  <meta charset="UTF-8"><title>Scribble & Self-Erase Effect</title><style>
    body { margin: 0; overflow: hidden; background: #000; }
    #canvas {
      display: block;
      cursor: crosshair;
      background: #111;
    }
  </style><canvas id="canvas" width="800" height="600"></canvas><script>
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    }

    const TOTAL_ALLOWED_POINTS = 12; // 调整此值控制拖尾长度（越大拖尾越长）
    const LINE_WIDTH = 2.5;
    const STROKE_STYLE = '#4ade80'; // 清新青绿色，可按需更换

    let canvas, ctx, width, height;
    const pointList = [];

    function setupCanvas() {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      width = canvas.width;
      height = canvas.height;

      // 启用抗锯齿提升线条平滑度
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
      ctx.lineWidth = LINE_WIDTH;
      ctx.strokeStyle = STROKE_STYLE;

      // 监听鼠标移动（支持触屏可额外加 touchmove）
      canvas.addEventListener('mousemove', (e) => {
        const p = new Point(e.offsetX, e.offsetY);
        pointList.push(p);

        // FIFO：超出容量则移除最老的点
        if (pointList.length > TOTAL_ALLOWED_POINTS) {
          pointList.shift();
        }
      });

      // 启动渲染循环
      requestAnimationFrame(renderPoints);
    }

    function renderPoints() {
      // ✅ 关键：每帧清屏，只画当前活跃点序列
      ctx.clearRect(0, 0, width, height);

      if (pointList.length < 2) return;

      ctx.beginPath();
      ctx.moveTo(pointList[0].x, pointList[0].y);

      for (let i = 1; i < pointList.length; i++) {
        ctx.lineTo(pointList[i].x, pointList[i].y);
      }
      ctx.stroke();

      requestAnimationFrame(renderPoints);
    }

    // 页面加载完成后初始化
    window.addEventListener('load', setupCanvas);
  </script>

注意事项与进阶建议

性能友好：全程无 DOM 操作，仅 Canvas 2D 渲染，即使在低端设备也能维持 60fps；
响应式适配：若需适配不同屏幕，可在 setupCanvas() 中监听 resize 并动态重设 canvas.width/height 及 ctx 属性；
增强真实感：可为线条添加轻微随机粗细变化（如 ctx.lineWidth = LINE_WIDTH * (0.8 + Math.random() * 0.4)）或基于速度的透明度衰减（需扩展 Point 类存储时间戳）；
移动端兼容：补充 touchstart / touchmove 事件，并将 e.offsetX/Y 替换为 e.touches[0].clientX/clientY 减去 canvas 位置；
交互优化：添加 mousedown 判断可避免空闲时误触发；启用 canvas.style.cursor = 'none' 可隐藏光标，强化“手绘”沉浸感。