Javascript 在drawImage下绘制笔划

我正在尝试使用HTML5和Javascript创建一个配色系统应用程序。我正在尝试将动态png图像加载到画布上，并在下面绘制笔划。但它似乎不起作用

---

我也尝试过使用分层画布，但它似乎也不起作用。有没有办法将笔划分层到图像下？

如果png图像具有透明区域（用户笔划应该在该区域绘制），您可以尝试：

首先在画布上绘制整个图像

正常处理用户笔划（检测鼠标向下、鼠标移动等），但跟踪“修改区域”（即第一次和最后一次单击之间的矩形）

当每个笔划结束时，再次绘制刚刚更改的canva区域（上一个矩形），这样用户的笔划将保持png图像的透明区域可见 通过这种方式，用户可以在笔划（填充颜色）上绘制原始png图像（例如铅笔画）

编辑： 更好的方法是使用两个画布/层：第一个（上面）将有原始png图像（及其透明区域）。当用户单击此处时，您可以在第二个画布（如下）中绘制笔划，因此您的png将始终保持不变，而无需在每个笔划上重新绘制。此外，它还可以轻松实现“擦除”工具

---

当然，在保存到磁盘、下载打印之前，您需要合并两张画布

如果png图像具有透明区域（用户笔划应该在该区域绘制），您可以尝试：

首先在画布上绘制整个图像

正常处理用户笔划（检测鼠标向下、鼠标移动等），但跟踪“修改区域”（即第一次和最后一次单击之间的矩形）

当每个笔划结束时，再次绘制刚刚更改的canva区域（上一个矩形），这样用户的笔划将保持png图像的透明区域可见 通过这种方式，用户可以在笔划（填充颜色）上绘制原始png图像（例如铅笔画）

编辑： 更好的方法是使用两个画布/层：第一个（上面）将有原始png图像（及其透明区域）。当用户单击此处时，您可以在第二个画布（如下）中绘制笔划，因此您的png将始终保持不变，而无需在每个笔划上重新绘制。此外，它还可以轻松实现“擦除”工具

---

当然，在保存到磁盘、下载打印之前，您需要合并两张画布

谢谢，我尝试了这种方法，但由于某些原因，我无法获得图像或笔划的工作。。。使用带有position:absolute的两个画布无法渲染任何内容。顶部画布不也会阻止下方画布接收鼠标事件吗？下面是一个你可以尝试的例子：我使用了文本而不是png图像，但原理是一样的；文本在顶层绘制，笔划在底层绘制（但单击事件在顶层绑定！）。看看这两幅画布是如何定位的。谢谢，我尝试了这种方法，但由于某些原因，我无法获得图像或笔划的工作。。。使用带有position:absolute的两个画布无法渲染任何内容。顶部画布不也会阻止下方画布接收鼠标事件吗？下面是一个你可以尝试的例子：我使用了文本而不是png图像，但原理是一样的；文本在顶层绘制，笔划在底层绘制（但单击事件在顶层绑定！）。看看这两张画布是如何定位的。