Javascript 上载图像作为画布的背景

我画了一个网格并上传了一张图片作为画布上的背景

当我清除画布时，图像和网格都被清除

我不希望网格和画布上传的图像背景被清除

---

你能帮我解决这个问题吗？

画布不区分内容-它都是一堆像素。当你清理画布时，你必须重新绘制你想要的一切。如果你有一个图像和一个网格，只要把它们放在一个方法中，你每次需要更新画布时都会调用这个方法

如果图像覆盖了整个画布，则不需要使用

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)';

---

将代码粘贴到此处，以便更好地理解。