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

【问题标题】：Resizing a HTML canvas blanks its contents调整 HTML 画布的大小会使其内容空白
【发布时间】：2011-04-02 09:12:14
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

如果您随时将来自不同域的图像绘制到画布上，前两个选项将不起作用，并且旧实现不支持。

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

【讨论】：

谢谢。不幸的是，我无法重绘原始数据，因为它是用户生成的。所以我选择了选项 1。
稍微修正一下你的观点 1. 它是 putImageData，而不是 setImageData。
我用过：var imgD = ctx.getImageData(0, 0, canvas.width - 1, canvas.height - 1); ctx.putImageData(imgD, 0, 0);
如果没有宽度和高度的 -1，您会得到错误：指定了无效或非法的字符串”代码：“12
@Richard：感谢您的更正。 “无效或非法字符串...”错误似乎是一个错误，但我猜不管用什么。