桌面和移动设备上的 HTML5 Canvas [关闭]答案

【问题标题】：HTML5 Canvas on Desktop and Mobile [closed]桌面和移动设备上的 HTML5 Canvas [关闭]
【发布时间】：2016-01-21 18:59:51
【问题描述】：

我正在构建一个 Web 应用程序，用户可以在其中使用 HTML5 Canvas 创建自己的图像。（我也在使用 Jcanvas）。

在桌面上，画布尺寸为 500x500（因此，它会生成 500x500 像素的图像）。

在移动设备上，画布大小为 300x300，但我仍想生成大小为 500x500 像素的图像。

现在，我想不通，我无法让它工作！

【问题讨论】：

【解决方案1】：

画布的 width 和 height 属性定义了画布中有多少逻辑像素。这与 physical 像素不同，即画布在屏幕上使用了多少像素。你可以用css控制它。所以你可以这样做：

<canvas style="width: 300px; height: 300px" width=500 height=500> </canvas>

这为您提供了一个在 300x300 区域中显示 500x500 图像的画布

【讨论】：

【解决方案2】：

为了扩大规模，避免看起来不好，您将需要使用用户用于制作 300x300 图像的操作来创建 500x500 图像。因此，即使您只使用 300x300 的屏幕空间，您也希望将其转换为 500x500 大小的图像。

我假设您使用 300x300 的尺寸，而不是因为移动设备的限制（在大多数情况下它们可以处理 500x500 的图像。）

考虑到这一点，我会说您应该有一个屏幕外画布（只是在内存中，实际上并不显示在 Bowser 上），您创建的尺寸为 500x500。然后在 300x300 上发生的每个动作也应该应用于 500x500 画布。当用户点击保存时，将 500px 的图片发送到服务器。

【讨论】：