Question

我正在绘制网格并将图像作为背景上传到画布上。

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

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

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

Answer 1

Canvas没有区分内容 - 它是一堆像素。当您清除画布时，您必须重绘您想要的所有内容。如果你有一个图像和一个网格，只需将它们放在你每次需要更新画布时调用的方法中。

如果您的图片覆盖整个画布，则无需使用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的任何其他元素，但要注意它不会是您使用{{1生成的画布位图本身的一部分}}。但是，如果背景只是暂时的而不是任何结果的一部分，那么这可能是一个不错的选择：

toDataURL()

您还可以将网格作为图像，并将它们设置为彼此重叠的背景。

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

上传图像作为画布的背景

1 个答案: