调整HTML画布大小会清空其内容。

Question

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

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

实际的调整大小功能正常，但它会清空画布。

我想保留画布内的内容。有没有其他方法可以改变画布元素的大小，或者有没有一种方式可以存储内容，然后将其重新绘制到画布上？

- Richard Garside

Answer 1

你需要使用CSS调整画布大小或者在调整大小后重新绘制画布。

如果你想保存画布的内容并重新绘制它，我能想到以下几种选项:

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

如果你曾经在画布上绘制来自其他域的图像或者你的实现不支持，前两种选项都无法使用。

在我看来，选项3（在新比例下重新绘制图像）是最好的选择，如果可能的话。它是唯一一个可以保持线条完全平滑和清晰的选项，并且它总是可行的（假设你仍然有生成图像所需的所有信息）。

- Matthew Crumley

---

谢谢。不幸的是，我无法重新绘制原始数据，因为它是用户生成的。所以我选择了选项1。 - Richard Garside

对你的第一点稍作更正，应该是putImageData而不是setImageData。 - Richard Garside

我使用了以下代码： var imgD = ctx.getImageData(0, 0, canvas.width - 1, canvas.height - 1); ctx.putImageData(imgD, 0, 0); - Richard Garside

没有给宽度和高度加上-1，你会得到错误提示："指定了无效或非法的字符串" 代码："12"。 - Richard Garside

@Richard：感谢您的纠正。 "invalid or illegal string..." 错误似乎是一个 bug，但无论如何能用就好了。 - Matthew Crumley

你可以在用户更改画布内容之前保存画布内容...然后在调整大小后使用此临时内容。 - Sérgio S. Filho