0

誰かがこれに気づいたかどうかはわかりませんが、試してみます。

キャンバスは他の HTML 要素とは動作が異なるため、CSS ではなく resize イベントを使用してサイズを変更します。これはうまく機能し、

ただし、ブラウザーのサイズが最大化から通常に変更された場合を除きます。この場合、キャンバスは div よりも小さくなります。違いはおよそ

スクロールバーの幅。実際、キャンバスをスクロールバーを強制するのに十分な大きさにすると、これは起こりません。

これは、サイズ変更イベントのタイミングと関係がありますか? 誰もそれを解決する方法を知っていますか?

編集

これは IE9 (右側) と Safari (下と右側) に当てはまります。ただし、Chrome と FF は対象外です。

ここでフィドル ->フィドル

/編集

window.onload = function()
{
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    window.addEventListener('resize', doTheResize, false);
}

function doTheResize()
{
    canvas.width = div.clientWidth;
    canvas.height = div.clientHeight;
    drawThings();
}
4

1 に答える 1

2

getBoundingClientRectを使用して幅と高さを取得し、キャンバスをそのサイズにします。

ライブデモ

全画面表示

マークアップ

<div class="container">
    <canvas id="canvas"></canvas>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
.container {
    height:100%;
    width:600px;
}

JS

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.parentNode.getBoundingClientRect().width;
canvas.height = canvas.parentNode.getBoundingClientRect().height;

ctx.fillRect(0, 0, canvas.width, canvas.height);

window.onresize = function () {
    canvas.width = canvas.parentNode.getBoundingClientRect().width;
    canvas.height = canvas.parentNode.getBoundingClientRect().height;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
于 2013-03-28T22:32:41.817 に答える