调整HTML画布的大小将清空其内容

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

如果您想保存画布的内容并重新绘制,我可以考虑以下几个选项:

1. 使用 context.getImageData 要获取整个画布,请调整画布的大小,然后使用 context.putImageData 以新的比例重新绘制。
2. Image 对象,将源设置为 canvas.toDataUrl()
3. 呼叫 context.setScale(xscale, yscale) xscale yscale 正确的话,它会自动将所有内容缩放到新的大小。
4. 创建一个具有更新大小的新画布并调用 context.drawImage(oldCanvas, ...) 把旧画布复制到新画布上。然后你会把旧的画布换成新的。

如果您在任何时候都将图像从不同的域绘制到画布上,并且旧的实现不支持,那么前两个选项将不起作用。

在我看来,如果可能的话,选项3(以新的比例重新绘制图像)是最好的。这是唯一的选择,将保持你的线条完全平滑和锐利,它将始终工作(假设你仍然有所有的信息来生成图像)。