Javascript HTML5手机应用程序-视网膜的重新缩放

这是我第一次为移动设备开发html5。我希望我的应用程序运行通用，所以它需要考虑视网膜显示以及正常显示

我正在运行这段代码，在iPhone3G（普通显示器）和iPhone5（视网膜显示器）上看起来都不错：

我真的只是想知道我是不是用正确的方法来做这件事？一切看起来都很好，但我不想在经过几天的工作和编码之后发现这是一种错误/糟糕的方法

另外，我知道我需要两个版本的图像，例如：一个32x32的图像用于普通屏幕，一个64x64的图像用于视网膜，但我需要将该图像缩小50%。对吗

---

谢谢。

ctx.scale

可能会起作用，但可能会让你的图像看起来像狗屎一样

当然，你可以使用视网膜大小的图像并缩小比例，但是你会在非视网膜设备上增加额外的工作量，比如3gs，这已经很慢了

我使用的方法是：

myCanvas.width = 300;
myCanvas.height = 300;

// you can use variables to get this value: width * window.devicePixelRatio
myCanvas.style.width = "600px";
myCanvas.style.height = "600px";

当然，您还需要按window.devicePixelRatio缩放所有输入

myCanvas.width = 300;
myCanvas.height = 300;

// you can use variables to get this value: width * window.devicePixelRatio
myCanvas.style.width = "600px";
myCanvas.style.height = "600px";