本文详解如何使用 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 终端节点、同步与异步等。
完整可运行代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<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>
</body>
</html>注意事项与进阶建议
- 性能友好：全程无 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'可隐藏光标，强化“手绘”沉浸感。
该方案摒弃了复杂路径缓存与定时器清理逻辑，以极简的数据结构（数组）和纯函数式渲染达成优雅的自擦除效果——既是实用技巧，也是理解 Canvas 动画本质的一堂生动实践课。
立即学习“Java免费学习笔记（深入）”；
