1

要素を画面のフルサイズでレンダリングしようとしています:

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <canvas></canvas>
    <script>
        (function(){
            var canvas = document.getElementsByTagName("canvas")[0];
            canvas.style.background = "#0f0";
            canvas.style.width = screen.width + "px";
            canvas.style.height = screen.height + "px";

            console.log(
                "screen.width: " + screen.width +
                "\nscreen.height: " + screen.height +
                "\ncanvas.width: " + canvas.style.width +
                "\ncanvas.height: " + canvas.style.height
            );
        })()
    </script>
</body>
</html>

ただし、キャンバス要素は、chrome v22 では画面の幅の約 2 倍、高さの 2 倍でレンダリングされますが、FF では問題ないようです。コンソール出力が得られます:

screen.width: 1366 screen.height: 768 canvas.width: 1366px canvas.height: 768px

キャンバスの幅と高さをクロムで手動で設定する場合は、次を使用する必要があります。

canvas.style.width = 780 + "px";
canvas.style.height = 435 + "px";

クロムで画面のサイズに合わせてFFをチェックすると、両方の寸法で画面の半分を超えると予想されるようにレンダリングされます。

アップデート：

私はこれを試しました：

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body style="padding:0;margin:0;">
    <div>
        <canvas>
        </canvas>
    </div>
    <script>
        (function(){
            var div = document.getElementsByTagName("div")[0],
                canvas = document.getElementsByTagName("canvas")[0];

            div.style.background = "#f00";
            div.style.width = screen.width + "px";
            div.style.height = screen.height + "px";

            canvas.style.background = "#0f0";
            canvas.style.width = "100%";
            canvas.style.height = "100%";

            console.log(
                "screen.width: " + screen.width +
                "\nscreen.height: " + screen.height +
                "\ncanvas.width: " + canvas.style.width +
                "\ncanvas.height: " + canvas.style.height
            );
        })()
    </script>
</body>
</html>

しかし、同じ効果があり、FFでは機能しますが、クロムでは機能しません。

以前にテストサイトwww.0xor1.comでこれを行いましたが、jQueryを使用css({width:screen.width, height:screen.height})して設定したため、機能しますが、この方法がクロムで機能しない理由がわかりません。

4

3 に答える 3

2

canvas 要素の幅と高さは次のようにマークする必要があります。

<canvas id="myCanvas" width="200" height="200">

CSSスタイルはそれを台無しにします

于 2012-10-28T13:28:42.970 に答える
0

設定してみる

canvas.width = screen.width + "px";
canvas.height = screen.height + "px";

なしで.style.

于 2012-10-28T13:28:50.163 に答える
0

ウィンドウが画面よりもはるかに小さい可能性があります。ウィンドウよりも多くをカバーすることはできないため、画面が必要なものではない可能性があります。

こう変えたら全身を覆うように

        var canvas = document.getElementsByTagName("canvas")[0];
        var body = document.getElementsByTagName("body")[0];
        canvas.style.background = "#0f0";
        canvas.style.width = body.offsetWidth + "px";
        canvas.style.height = body.offsetHeight + "px";
于 2012-10-28T13:28:54.610 に答える