如何在畫布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)}