javascript - 桌面和移动设备上的 HTML5 画布

Question

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

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

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

现在，我不知道，我不能让它工作！

Answer 1

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

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

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

Answer 2

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

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

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