如何在画布html5中使用.png图像作为背景？

Question

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

事情是我不想绘图来修改这个图像，我只是希望它可以作为用户的参考或指南。

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

我该如何预防？

Thanx。

Answer 1

您可以使用CSS到画布上的<img>元素与后台位置

这类似于惯用的伎俩做分层动画：只是做了不同<canvas>元每一层，把一个在顶部另一个。

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

Answer 2

您可以简单地使用CSS。

比方说你有一个画布，如：

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

您可以使用CSS把一个背景图片：

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