如何在一张图片上做涂鸦（功能持续更新）

一、支持的功能

二、实现思路

Q1：如何在图片上实现涂鸦功能？

Q2：如何实现更改笔刷颜色和宽度功能？

Q3：如何实现撤回功能？

Q4：如何实现清空画布的功能？

Q5：在不改变当前画布上内容的情况下，如何将用户涂鸦的内容转成一张黑底白色轨迹的图片？

三、完整代码

四、在线演示

一、支持的功能

在图片上进行涂鸦

支持撤回最近一次涂鸦操作

支持清空画布

支持将用户涂鸦的内容转成一张黑底白色轨迹

二、实现思路

Q1：如何在图片上实现涂鸦功能？

可以在元素上叠加一个元素。当图片的来源确定时，便设置的宽高和图片一致。然后通过绝对定位，让重叠在上。 然后，通过监听元素上的鼠标事件来进行涂鸦。当触发 mousedown 事件时，设置一个标志以开始绘制；然后，触发 mousemove 事件，根据鼠标的移动来绘制线条；并在触发 mouseup 事件时，停止绘制。 此时，我们在画布上绘制内容，用户视觉上就是在图片上绘制内容。

Q2：如何实现更改笔刷颜色和宽度功能？

创建一个名为 ctx 的常量保量，用于表示 Canvas 的 2D 绘图上下文（通过 getContext('2d') 方法获得）。这个上下文对象允许我们在 Canvas 上进行绘制操作。 笔刷的颜色和宽度分别由ctx.strokeStyle和 ctx.lineWidth控制。

Q3：如何实现撤回功能？

需要创建一个数组，用来存储绘图的历史记录。 比如说我们新建了 drawingHistory 数组来存储 Canvas 的状态，每当鼠标抬起时，将当前 Canvas 的数据 URL 存入数组。 当用户点击“撤回”按钮时，我们从历史记录数组中移除最后一步，然后清除 Canvas 并取出历史记录中的最近一次记录进行绘制。

Q4：如何实现清空画布的功能？

需要创建一个数组，用来存储绘图的历史记录。 比如说我们新建了 drawingHistory 数组来存储 Canvas 的状态，每当鼠标抬起时，将当前 Canvas 的数据 URL 存入数组。 当用户点击“清空画布”按钮时，我们清空历史记录数组，然后清除 Canvas 。

Q5：在不改变当前画布上内容的情况下，如何将用户涂鸦的内容转成一张黑底白色轨迹的图片？

创建一个新的 canvas 元素，设置新 canvas 的宽度和高度与原始 canvas 相同。在新 canvas 上绘制黑色背景，将原始 canvas 上的图形绘制到新 canvas 上。

三、完整代码