通过升级节省 HTML5 Canvas

Question

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

Answer 1

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

示例HTML：

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

示例CSS：

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

有关原生与缩放 canvas 尺寸的更多信息，请参阅 this answer。

通过升级节省 HTML5 Canvas

Save HTML5 Canvas with upscaling

html

javascript

canvas

html5-canvas