5

私のアプリには、ローカル コンテンツを提供する UIWebView があります。-webkit-background-sizeRetina サイズの画像をボディの背景として使用すると、CSSプロパティを使用して適切にスケーリングできます。これにより、iPhone 4 でくっきりとした鮮明な画像が得られます。

ただし、HTML5 Canvas タグはそれほど協調的ではありません。コマンドを使用しdrawImageて同じ網膜サイズの画像を HTML5 キャンバスに配置すると、物理画面の境界をはるかに超えて巨大になります。これは私が使用しているコードです:

ctx.drawImage(retinaImage, 0, 0)

に高さと幅のパラメーターを配置しようとするとdrawImage、画像は画面に合わせて縮小されますが、ブロック状でピクセル化されています。CSS の背景のように鮮明ではありません。

-webkit-background-sizeCSSプロパティと同等の HTML5 Canvas に使用できるトリックはありますか?

ありがとう！

アップデート：

これが、この問題を解決するために使用した最終的なコードです。うまくいけば、将来誰かに役立つでしょう：

        if (window.devicePixelRatio == 2) {
            myCanvas.setAttribute('height', window.innerHeight * 2);
            myCanvas.setAttribute('width', window.innerWidth * 2);
            ctx.scale(2, 2);
        } else {
            myCanvas.setAttribute('height', window.innerHeight);
            myCanvas.setAttribute('width', window.innerWidth);
        }
4

1 に答える 1

4

http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-andをご覧ください。devicePixelRatio で寸法を掛けると、その比率で拡大縮小してもうまくいくはずです。

これが私のために働いた疑似コードです。

var ctx = myCanvasElem.getContext("2d");
ctx.attr("width", width * window.devicePixelRatio);
ctx.attr("height", height * window.devicePixelRatio);
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(img, x, y, width, height);

それがあなたのためにそれを解決するかどうか教えてください!

于 2011-03-24T23:57:54.210 に答える