0

jquery を使用せずに (つまり、古い JavaScript のみを使用して)、html ドキュメント内のすべてのキャンバスをドキュメントの幅と高さに設定するにはどうすればよいですか?

4

2 に答える 2

2

注: チーフとナエリオの回答はどちらも技術的に正しくありません。

ナエリオ: キャンバスのスタイルを変更すると、実際の幅と高さではなく、キャンバスのCLIENT WIDTHとCLIENT HEIGHTが変更されるため、キャンバスのコンテンツが拡大/縮小されてしまいます。 この問題の例: http://jsfiddle.net/AnLCw/1/ (スタイル アプローチを使用して黒い 50x50 の正方形がどのように引き伸ばされるかに注意してください)

Chief17 : キャンバスの幅と高さをパーセンテージで指定することはできません。問題の例: http://jsfiddle.net/Sg7cb/2/ (幅と高さがパーセンテージの場合、キャンバスが表示されないことに注意してください)

したがって、実際の解決策は次のとおりです。

キャンバスのスタイルを幅: 100%、高さ: 100% に設定する必要があります。

canvas.style.width = "100%"
canvas.style.height = "100%"

そして、次のようにします。

canvas.width = canvas.clientWidth
canvas.height = canvas.clientHeight

ここでの作業例: http://jsfiddle.net/acYdc/1/ (黒い四角が正しく描画され、キャンバスが領域を塗りつぶすことに注意してください。)

別の解決策は、設定するだけです

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

ただし、canvas.width = canvas.clientWidth アプローチはより柔軟です。

于 2012-05-17T22:15:25.843 に答える
1

ここで jsFiddle を作成しました: http://jsfiddle.net/ZrfeV/

ドキュメントに高さを指定して、キャンバスが拡張する大きさを知る必要があります。そうしないと、子要素の内部の高さによってドキュメントが取得する高さに拡張されます。

var canvases = document.getElementsByTagName('canvas');

for (var i = 0; i < canvases.length; i++) {

    canvases[i].style.width = '100%';
    canvases[i].style.height = '100%';
    canvases[i].width = canvases[i].clientWidth;
    canvases[i].height = canvases[i].clientHeight;

}
于 2012-05-17T22:06:55.093 に答える