html5 画布游戏 - 如何添加视网膜支持

Question

我正在为 iPhone 创建一个 HTML5 画布游戏。我想同时支持视网膜和非视网膜显示器。

我的问题是，如何同时支持视网膜和非视网膜显示器？

IE，这样做的一般实现是什么？我是否使用 iPhone 尺寸编写游戏，然后添加视网膜支持？还是我要创建游戏视网膜尺寸并添加非视网膜支持？最好有两张图像，一张视网膜一张非视网膜？或者只是缩小视网膜图像？视网膜和非视网膜是否有单独的画布尺寸？我需要缩放鼠标输入吗？

基本上，我不知道实现两者的一般想法/逻辑。

干杯， J

Answer 1

您使用 devicePixelRatio 将 Retina 显示器与普通显示器分开

• http://blog.iwalt.com/2010/08/generating-highresolution-graphics-with-html5s-canvas-element.html

您的游戏逻辑坐标（精灵位置等）必须独立于屏幕坐标运行，屏幕坐标在视网膜显示器上始终是 2 倍。

您的图形资源必须有两个版本。高分辨率版本和 50% 缩小的普通版本。当您在视网膜显示器上操作时，您绘制 2 倍大小的画布，使用 CSS 调整大小，并在此画布上使用高分辨率资源。

Answer 2

刚刚在 html5rocks.com 上发表了一篇关于该主题的新文章：

• HIGH DPI CANVAS

通过 devicePixelRatio / webkitBackingStorePixelRatio 增大画布宽度和高度，然后使用 CSS 将其缩小到所需的逻辑像素大小。以 Chrome 报告 webkitBackingStorePixelRatio 为 1 和 devicePixelRatio 为 2 为例，我们会将画布的尺寸缩放 2 / 1，即将它们乘以 2，然后我们将使用 CSS 将其缩小。

Answer 3

我知道这是一篇旧帖子，但我想我会用我实施的解决方案对其进行更新。

---

1：我用了两组图片：

• 一个用于非视网膜显示器（尺寸 1:1），
• 还有另一套用于视网膜的两倍大。

取决于正在使用的设备取决于加载的集合。

---

2：然后我调整画布的大小（这是它的关键）

非视网膜

    var canvas = document.createElement('myCanvas');

    canvas.width = 320;
    canvas.height = 480;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

视网膜

    var canvas = document.createElement('myCanvas');

    canvas.width = 640;
    canvas.height = 960;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

请注意，canvas.style.width 和 height 是相同的，无论您是否使用视网膜。

---

这就是它的全部内容！