在drawImage下绘制笔触

Question

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

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

Answer 1

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

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

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

编辑： 一个更好的想法可能是使用两个画布/图层：第一个（上面）将具有原始png图像（具有其透明区域）。当用户点击那里时你可以在第二个画布（下面）中绘制笔画，这样你的png就会一直都在，而不需要在每个笔画上进行额外的重绘工作。此外，它还可以轻松实现“擦除”工具。

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