javascript - 在drawImage下绘制描边

Question

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

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

Answer 1

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

1. 首先在画布上绘制整个图像。
2. 正常处理用户笔划（检测 mousedown、mousemove 等），但跟踪“修改区域”（即第一次和最后一次单击之间的矩形）
3. 当每个笔画完成时，再次绘制刚刚改变的画布区域（前一个矩形），这样用户的笔画将保持可见，并抛出 png 图像的透明区域。

这样，用户可以在用户的​​笔划（填充颜色）上绘制但保留原始 png 图像（例如铅笔画）。

编辑：一个更好的主意可能是使用两个画布/图层：第一个（上图）将具有原始 png 图像（具有透明区域）。当用户点击那里时，您可以在第二个画布（如下）中绘制笔画，因此您的 png 将一直结束，而无需在每个笔画上重新绘制额外的工作。此外，它还可以轻松实现“擦除”工具。

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