调整HTML画布的大小会使其内容空白

Question

我有一个HTML画布元素，当用户调整屏幕大小时会调整其大小。

canvas.height = pageHeight();
canvas.width = pageWidth();

实际的大小调整工作正常，但它会使画布空白。

我想保留内容。是否有另一种方法可以更改canvas元素的大小，还是有办法存储内容然后将它们绘制回画布？

Answer 1

您需要使用CSS调整画布大小，或者在调整大小后重绘画布。

如果你想保存画布的内容并重新绘制它，我可以想到几个选项：

1. 使用context.getImageData抓取整个画布，调整画布大小，然后使用context.putImageData以新的比例重绘它。
2. 创建一个Image对象，将源设置为canvas.toDataUrl()的结果，调整画布大小，然后以新的比例绘制图像。
3. 调用context.setScale(xscale, yscale)并调用您最初用于绘制画布的任何函数。假设您正确设置了xscale和yscale，它会自动将所有内容扩展到新的尺寸。
4. 创建一个具有更新大小的新画布，并调用context.drawImage(oldCanvas, ...)将旧画布复制到新画布上。然后你会用新的画布切换旧画布。

如果您已经在任何时间将图像从不同的域绘制到画布，并且旧版实现不支持前两个选项将不起作用。

在我看来，如果可能的话，选项3（以新比例重新绘制图像）是最好的。它是唯一可以保持线条完全平滑和清晰的选项，它始终有效（假设您仍然拥有生成图像的所有信息）。