web-dev-qa-db-ja.com

HTML5キャンバスのサイズを親に変更

キャンバス要素のサイズを変更して、親に合う場合は<body>（ "フルスクリーン"）またはいくつかの<div> 例えば。これは私の試みです：

// called at each frame
function update() {
    var canvasNode = document.getElementById('mycanvas');
    canvasNode.width = canvasNode.parentNode.clientWidth;
    canvasNode.height = canvasNode.parentNode.clientHeight;
}

どういうわけか、キャンバスは成長を止めません！多分 client*正しいパラメータではありませんか？

ここで実際のコードを参照してください： http://jsfiddle.net/ARKVD/24/

javascripthtmldomcanvashtml5-canvas
16
Giovanni Funchal

最も簡単な方法は、キャンバスを常に独自のdivに保持することです。

このdivに含まれるのはキャンバスだけです。

次に、CSSを使用してdivのサイズを変更できます。あなたはそれを体と同じくらい大きくしたいですか？ divを与えるwidth: 100%。

そうすれば、いつでも正しく行うことができます。

canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

これを行うと、ボディがdivの直接の親である場合に、現在直面している奇妙な問題について心配する必要がなくなります。

14
Simon Sarris

最もクリーンなアプローチは、サイズ変更時にキャンバス要素の大きさを単純に「思い出させる」ことであることがわかりました。

window.onresize = function () {
    canvas.style.width = '100%';
    canvas.height = canvas.width * .75;
}

この場合の高さ設定は、単に4：3の比率を維持するためのものです。もちろん、必要に応じて100％にすることもできます。

1
Josh Langley

親ノードと子ノードの間の循環依存関係を解消することで、問題を回避できます。 DOM要素のサイズ割り当ては、トップダウン（親から子）にのみ伝播する必要があります。設定することで、子要素（キャンバス）が親のサイズに影響を与えないようにすることができます

canvasNode.style.position = 'absolute';

これにより、親から独立した独自のドキュメントフローに配置されます。

0
Imran

同じ問題が発生していることがわかりました。これを回避する唯一の方法は、キャンバスの高さをparentHeight-1に設定することでした。これはCEFを使用していました。 this fiddleでは、parentHeight-5に設定する必要がありました。

canvasNode.height = div.clientHeight - 5;
0
Sam