Question

我想在HTML5提供的canvas元素中使用背景图像。

问题是我不希望绘图修改此图像，我只是想将其用作用户的参考或指南。

例如：如果我在画布上绘制背景图像，那么我会添加一些线条和随机图纸，一旦我使用擦除工具，它将擦除我制作的线条和背景图像。

我该如何防止这种情况？

感谢名单。

Answer 1

您可以使用CSS将画布定位在具有背景的<img>元素上

这类似于分层动画的常用技巧：只需为每个图层执行不同的<canvas>元素，然后将其放在另一个图层的顶部。

<canvas>的非绘制像素是透明的，而不是白色。

Answer 2

您可以简单地使用CSS。

假设您有一个画布，例如：

<canvas id="Canvas" width="385px" height="330px"></canvas>

您可以使用CSS来放置背景图片：

#Canvas{background:url(Grid.png)}