0

html5 キャンバスが画面全体を占めるゲームを作成しています。しかし、私が使用するとき

<meta name="viewport" content="width=device-width">

タグを使用すると、最新の Chrome for Android でキャンバスがひどくピクセル化されます。

簡単なテストを作成しました（ここから入手できます）：

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            window.onload = function () {
                var canvas = document.getElementById("canvas"),
                    ctx = canvas.getContext("2d"),
                    radius = 0;

                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                radius = (canvas.width < canvas.height) ? canvas.width / 3 : canvas.height / 3;

                ctx.beginPath();
                ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI, false);
                ctx.fillStyle = "red";
                ctx.fill();
            }
        </script>
    </body>
</html>

画面中央に赤い点を描画します。これは、Chrome for Android を除くすべての場所でうまく機能します。これをレンダリングするのは.

誰が何が起こっているのか知っていますか？

4

1 に答える 1

0

あなたが経験している問題は、アンチエイリアスがオフになった Chrome for Android の変更によるものです。

このバグは問題の概要を示しています: https://code.google.com/p/chromium/issues/detail?id=285066

Chrome Beta では元の状態に戻っているようです。

于 2013-11-24T23:36:13.257 に答える