1

Firefox、Safari、および Chrome で発生する奇妙な動作のように思えることに、1 時間以上も費やしたに違いありません。ここにいくつかのコードがあります：

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("height", window.innerHeight);
        canvas.setAttribute("width", window.innerWidth);
    }
</script>

基本的に、キャンバスは常に「大きすぎる」ように見え、ウィンドウは両側のスクロールバーを大きくします。document.documentElement.clientWidth/Height プロパティを抽出するだけでなく、100% 幅 & 高さの絶対配置 div にキャンバスをネストするなど、ドキュメントのサイズを取得するさまざまな方法を使用してみました。

気が狂わないようにするために、キャンバスの代わりに画像を配置しました。ほら、同じコードが完全に機能して、画像をドキュメントの寸法に引き伸ばしました。

ここで何が間違っていますか？疲れすぎて理解できません。何かを飲む必要があります。

4

3 に答える 3

1

キャンバスを拡張してページ全体をカバーする方法を探している場合、私が見つけた最善の解決策は、CSS で自動的にサイズを 100% に変更し、現在のキャンバス要素のサイズを使用してキャンバスの解像度をリセットすることです。
スクロールバーが表示されないようにするには、キャンバスの CSS 位置も絶対に設定する必要があります。

(Chrome 34、Firefox 27、Explorer 11 でテスト済み)

<!DOCTYPE html>
<html>
    <body onload="resizeCanvas()" style="margin: 0;">
        <canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
    </body>
</html>

<script type="application/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas");
        canvas.setAttribute("width", canvas.offsetWidth);
        canvas.setAttribute("height", canvas.offsetHeight);

        // We draw a circle, just to test that it works
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(canvas.offsetWidth/2, canvas.offsetHeight/2, canvas.offsetHeight/2,    0, Math.PI*2, true); 
        ctx.closePath();
        ctx.fill();
    }
</script>
于 2011-05-28T15:35:06.060 に答える
0

私はこの問題の回避策を見つけていません (まだフィードバックを受け付けています) ので、今のところ親コンテナー要素のオーバーフローを非表示にして、探していたものを大まかにもたらしました。とはいえ、これだけバラバラだともったいないですよね。私が何かを見逃していない限り..

于 2010-05-04T05:16:52.757 に答える
-1

これは Firefox 4 で動作しますが、このコンピューターには他のブラウザーがないため、他のブラウザーでは試していません。

<!doctype html>
<html>
    <head>
        <title>Watch me grow scrollbars!</title>
<style>
body { margin: 0; padding: 0; }
canvas { width: 100%; height: 100%; border: 0; }
</style>
<script type="text/javascript">
    function resizeCanvas() {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext('2d'),
            height = document.body.clientHeight,
            width = document.body.clientWidth;
        canvas.setAttribute("height", height);
        canvas.setAttribute("width", width);
        ctx.fillStyle = 'rgb(128,128,128)';
        ctx.fillRect(10, 10, width-20, height-20);
    }
</script>
    </head>
    <body onload="resizeCanvas()">
        <canvas id="canvas"></canvas>
    </body>
</html>

IE7 (とにかくキャンバスをサポートしていません) に関しては、コードを機能させるために 、スクリプトの type 属性を からapplication/javascriptに変更する必要がありました。text/javascript

これが理由です: (スクリプトタグの type 属性の javascript MIME タイプは何ですか? のkeparo を引用)

JavaScript の MIME タイプは何年も標準化されていませんでした。現在、正式には「application/javascript」です。

ここでの本当のキッカケは、少なくとも script タグの場合は、ほとんどのブラウザーがとにかくその属性を使用しないということです。彼らは実際にパケットの中をのぞいて、自分でタイプを判断します。

つまり、type="text/javascript" は javascript に関する限り何もしないということですが、これは HTML 4 と XHTML 1.0 の両方の仕様の一部です。

これが IE の最近のバージョンを表しているかどうかはわかりません。

于 2011-05-28T18:55:30.897 に答える