使用upscaling保存HTML5 Canvas

Question

我正在使用HTML5画布开发一个包含文本的图像编辑器。我使用的画布的宽度和高度为500像素，因为将它放在网页上的空间较小。但是我需要将画布数据保存为更大比例的图像，如1000 x 1000像素。我怎样才能做到这一点？我在网上搜索类似的问题，但找不到答案。

Answer 1

要完成此操作，您需要将画布上的width和height属性设置为1000和1000。这表示画布的原生大小。然后，您可以使用CSS缩小画布，使其适合您的页面。

示例HTML：

<canvas id="theCanvas" width="1000" height="1000"></canvas>

示例CSS：

theCanvas {
    width: 500px;
    height: 500px;
}

有关原生vs缩放画布尺寸的详细信息，请参阅this answer。