1

私は現在、HTML5 の canvas 要素を使用して実行されるアプリに取り組んでいます。次のようにサイズが変更されたときに、ウィンドウのサイズに合わせてキャンバスのサイズを変更するコードがあります。

<script type="text/javascript">
$(window).resize(function(){
var canvas = document.getElementById('canvas');
canvas.width=window.innerWidth;
canvas.height = window.innerHeight;
});
</script>

ただし、誰かが画面のサイズを変更したときだけでなく、キャンバスを最初から完全にサイズ変更したいと考えています。何らかの理由で、上記のコードをコピーすると、またはに変更$(window).resizeする以外は、キャンバスがウィンドウのサイズに設定されません。$(window).load$(document).ready

私がやろうとしていることで、私が見ていない何かが間違っていると思う人はいますか、それともこれを達成する方法について他のアイデアがありますか?

よろしくお願いします、
サミ

編集：

ProcessingJS スケッチをキャンバスにロードしていることに注意してください。ロードにかかる時間が影響するかどうかはわかりませんが、これについては言及したほうがいいと思いました...

4

2 に答える 2

3

.width/によるサイズ変更の問題.heightは、jQuery がこれに CSS を使用することです。キャンバスのピクセル数を増やしたい場合は、代わりにキャンバスのwidth/heightプロパティを使用してください。CSS はそれを引き延ばし、HTML は解像度を上げます。

$("#canvas")
    .attr('width', $(window).width())
    .attr('height', $(window).height());

http://jsfiddle.net/Jdjxa/1/

于 2011-07-18T21:03:17.823 に答える
1

次のようなものを試してください：

function resizeCanvas() {
    $("#canvas")
        .width($(window).width())
        .height($(window).height());
}

$(function() {
    // initial resize when the page has loaded
    resizeCanvas();

    // bind the resize event to the window
    $(window).resize(resizeCanvas);
});

フィドル： http： //jsfiddle.net/ANSrY/13/

于 2011-07-18T19:02:32.643 に答える