どのように網膜iPad上でjavascript内の@ 2倍画像スケーリングを防ぐには？

Question

私はhtmlの<canvas>とjavascriptを使ってウェブゲームを開発しています。ゲームはiPad、好ましくは網膜と非網膜ディスプレイの両方で機能する必要があります。このゲームでは、私はスプライトシートPNG​​を使用します。このスプライトシートは、幅3500ピクセル、高さ3700ピクセルです。

私のゲームのロジックでは、キャンバス 'context.drawImage()を使ってスプライトをつかんでキャンバスに描いています。デスクトップブラウザでは、これは完全にうまく動作し、すべてが素晴らしいです。網膜のiPadでは、画像はそのサイズのわずか4分の1しか読み込まれないので、多くの私のdrawImage()呼び出しが失敗し、読み込まれた画像の境界の外にあるピクセルをつかむことが考えられます。 （場所1200,1400でスプライトをつかんで、私のイメージがそれよりも小さいと思った場合は、INDEX_SIZE_ERRエラーがスローされます）。

たとえば、私のプロジェクトでは次のコードを使用しています。幅と高さを警告すると、幅875ピクセル、高さ925ピクセルの結果が得られます。元の画像サイズのちょうど1/4です。

この網膜ディスプレイの通常の解決策は、サイズが大きくなった画像を作成して、iPadがそれをダウンスケールしたときにすべてうまくいくようにすることです。しかし、上記のサイズでは、幅と高さの4倍のサイズの画像を作成する必要があります。これにより、幅14000ピクセル、高さ14800ピクセルの画像が作成されます。固体の白いjpgとしても、このイメージはPhotoshopで保存されず、Gimpでは1.9GBの大きさであると報告されています。もちろん、これは解決策ではありません。 ;）

私の質問は：iPad網膜ディスプレイがJavascriptで読み込まれた画像を縮小するのを防ぐ方法はありますか？私の3500x3700ピクセルイメージをロードするとき、3500x3700ピクセルのままにする必要があるので、私のcontext.drawImage()は意図したとおりに動作します。

すべてのアイデアをいただければ幸いです。ありがとう！

Answer 1

あなたは、ディスプレイには、以下のものを使用して網膜であるかどうかを見つけることができます。

var retina = window.devicePixelRatio > 1 ? true : false; 

if (retina) { 
    // the user has a retina display 
    // do something 

} 
else { 
    // the user has a non-retina display 
    // do something else 
}