HTML5 Canvas 在桌面和移动设备上
HTML5 Canvas on Desktop and Mobile
我正在构建一个 Web 应用程序，用户可以在其中使用 HTML5 Canvas 创建自己的图像。 （我也在用 Jcanvas）。
在桌面上，Canvas 大小为 500x500（因此，它生成 500x500 像素的图像）。
在移动设备上，Canvas 尺寸为 300x300，但我仍想生成尺寸为 500x500 像素的图像。
现在，我没有想法，我无法让它发挥作用！
为了放大而不至于看起来很糟糕，您将需要使用用户在制作 300x300 图像时所用的操作来创建 500x500 图像。因此，即使您只使用 300x300 的屏幕 space，您也想将其转换为 500x500 大小的图像。
我假设您使用 300x300 的尺寸，而不是因为移动设备的限制（在大多数情况下它们可以处理 500x500 的图像。）
考虑到这一点，我会说您应该创建一个 500x500 的离屏 canvas（仅在内存中，实际上不会显示在 bowser 上）。那么在 300x300 上发生的每个动作也应该应用于 500x500 canvas。当用户单击保存时，将 500px 图像发送到服务器。
您的 canvas 的 width 和 height 属性定义了多少 logical像素在canvas中。这与 物理 像素不同，即 canvas 在屏幕上使用的像素数。您可以使用 css 来控制它。所以你可以这样做：
<canvas style="width: 300px; height: 300px" width=500 height=500> </canvas>
这为您提供了一个 canvas 在 300x300 区域显示 500x500 图像
我正在构建一个 Web 应用程序，用户可以在其中使用 HTML5 Canvas 创建自己的图像。 （我也在用 Jcanvas）。
在桌面上，Canvas 大小为 500x500（因此，它生成 500x500 像素的图像）。
在移动设备上，Canvas 尺寸为 300x300，但我仍想生成尺寸为 500x500 像素的图像。
现在，我没有想法，我无法让它发挥作用！
为了放大而不至于看起来很糟糕，您将需要使用用户在制作 300x300 图像时所用的操作来创建 500x500 图像。因此，即使您只使用 300x300 的屏幕 space，您也想将其转换为 500x500 大小的图像。
我假设您使用 300x300 的尺寸，而不是因为移动设备的限制（在大多数情况下它们可以处理 500x500 的图像。）
考虑到这一点，我会说您应该创建一个 500x500 的离屏 canvas（仅在内存中，实际上不会显示在 bowser 上）。那么在 300x300 上发生的每个动作也应该应用于 500x500 canvas。当用户单击保存时，将 500px 图像发送到服务器。
您的 canvas 的 width 和 height 属性定义了多少 logical像素在canvas中。这与 物理 像素不同，即 canvas 在屏幕上使用的像素数。您可以使用 css 来控制它。所以你可以这样做：
<canvas style="width: 300px; height: 300px" width=500 height=500> </canvas>
这为您提供了一个 canvas 在 300x300 区域显示 500x500 图像