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

Question

我有一个HTML canvas元素,当用户调整屏幕大小时会调整其大小.

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(以新比例重新绘制图像)是最好的.它是唯一可以保持线条完全平滑和清晰的选项,它始终有效(假设您仍然拥有生成图像的所有信息).