18

Canvas での描画を実装する phoneGap の操作。私たちが遭遇した問題は、canvas が特定のピクセル寸法を想定していることです。これは問題ありませんが、技術的には実際の画面ピクセルは 640 ですが、CSS/Webkit POV からの iPhone 4 の Retina ディスプレイはまだ 320px 幅です。

非 Retina ディスプレイとの互換性を維持しながら、Canvas on Webkit を使用して Retina ディスプレイに対応する方法はありますか?

4

6 に答える 6

39

私は先週同じ問題を抱えていて、それを解決する方法を発見しました -

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

if (window.devicePixelRatio > 1) {
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    canvas.width = canvasWidth * window.devicePixelRatio;
    canvas.height = canvasHeight * window.devicePixelRatio;
    canvas.style.width = canvasWidth + "px";
    canvas.style.height = canvasHeight + "px";

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
}

gist の完全なコード、 jsfiddleのデモ

于 2011-03-15T02:37:28.783 に答える
0

WebCode ( http://www.webcodeapp.com ) は、JavaScript HTML5 Canvas コードを生成するベクター描画アプリです。コードは Retina と互換性があるため、その方法を確認できます。

于 2013-06-06T09:58:33.000 に答える