通过放大保存 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;
}

有关原生与缩放画布大小的更多信息，请参阅this answer。