上傳圖像作爲背景畫布

Question

我正在繪製網格並將圖像作爲背景上傳到畫布上。

當我清除畫布，無論是圖像和電網越來越清除。

我不想電網和帆布的上傳的圖片背景得到清除。

能否請您幫助解決這個？

Answer 1

畫布不區分內容 - 其所有的一組像素。當你清除畫布時，你必須重畫你想要在那裏的所有東西。如果你有一張圖片，那麼每次需要更新畫布時，都會將這些圖片放入一個您調用的方法中。

如果你的圖像覆蓋整個畫布，你不需要使用clearRect()方法。只需重新繪製您的圖像和網格。您可以在一個方法把它包起來，例如：

function clear() { 
    //ctx.clearRect(0, 0, width, height); /// if image doesn't cover canvas 
    ctx.drawImage(bgImage, 0, 0);   /// draw your image here 
    ... render grid here... 
} 

然後調用clear()而不是ctx.clearRect()。

可以使用CSS或者設置畫布元素背景圖像的任何其他元素，但要注意的是它不會畫布本身的位圖你生產使用toDataURL()的一部分。然而，如果背景只是暫時的，並不意味着任何結果，這可能是一個很好的選擇的一部分：

canvas.style.background = 'url(urlToImage.png)'; 

你也可以有網格，圖像和設置都爲彼此的頂部背景。

canvas.style.backgroundImage = 'url(urlToImage.png), url(urlToGrid.png)';