用canvas勾勒流畅的笔迹，canvas实现笔迹回放的奥秘

2023-03-25 07:59:16

笔迹回放：在 Canvas 上用贝塞尔曲线重现流畅的书写效果

身为一名经验丰富的 JavaScript 开发人员，在职业生涯中，我时常面对形形色色的技术挑战，其中一个令我颇费思量的问题便是笔迹回放的实现。看似简单的需求，其实暗藏着丰富的技术细节。在本文中，我将揭开自己是如何运用 Canvas 和贝塞尔曲线，勾勒出流畅的书写体验。

Canvas 与贝塞尔曲线

在着手实现之前，我们先来认识一下 Canvas 和贝塞尔曲线这两位主角：

Canvas： Canvas 作为 HTML5 的画板，提供了一个绘制图形的平台，让我们得以创建各种形状和图案。

贝塞尔曲线： 贝塞尔曲线是一种数学曲线，凭借着平滑的线条，它常被用于勾勒出自然的曲线。

笔迹回放原理

要实现笔迹回放，关键在于记录下笔迹的轨迹，然后根据轨迹重绘出书写内容。

记录轨迹： 通过监听 Canvas 上的鼠标移动事件，我们可以捕捉到书写时的坐标点，从而记录下笔迹的轨迹。
绘制轨迹： 捕捉到的坐标点被连接成线段，构成了笔迹的轨迹，最后，我们只需将轨迹绘制在 Canvas 上即可。

代码实现

为了加深理解，让我们将理论付诸实践，一起来编写笔迹回放代码：

// 创建 Canvas 元素
const canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;

// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');

// 监听鼠标移动事件
canvas.addEventListener('mousemove', (e) => {
  // 记录鼠标坐标
  const x = e.clientX;
  const y = e.clientY;

  // 将坐标添加到轨迹
  ctx.lineTo(x, y);

  // 绘制轨迹
  ctx.stroke();
});

// 监听鼠标抬起事件
canvas.addEventListener('mouseup', () => {
  // 将轨迹保存为图像数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  // 将图像数据转换为 Base64 字符串
  const base64 = canvas.toDataURL();

  // 将 Base64 字符串保存到本地存储
  localStorage.setItem('pen_path', base64);
});

// 从本地存储中获取笔迹轨迹
const base64 = localStorage.getItem('pen_path');

// 将 Base64 字符串转换为图像数据
const imageData = new ImageData(canvas.width, canvas.height);
imageData.data.set(atob(base64.split(',')[1]));

// 将图像数据绘制到 Canvas 上
ctx.putImageData(imageData, 0, 0);