[javascript] キャンバスを親として幅広く高くする



Answers

キャンバスのwidthheight属性を実際に親要素と同じ大きさにするには、それを使用します。 JQueryを使用して設定できます。

$(document).ready(function() {
  var canvas = document.getElementById("theCanvas");
  canvas.width = $("#parent").width();
  canvas.height = $("#parent").height();
});

JQueryが分からない場合は、次のJavascriptを使用してください。

var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;

css height属性とwidth属性を使用する場合、 style="width:100%; height:100%;" キャンバスを伸ばすだけです。 これにより、キャンバス上に描画するすべてのものが引き伸ばされます。

JQueryソリューションのためのJSFiddle

JavascriptソリューションのためのJSFiddle

Question

私はプログレスバーをシミュレートするために長方形のキャンバスを作りたいと思いますが、キャンバスの幅と高さを100%に設定すると、それは実際には親と同様に高くて幅が広くなりません

下記の例をご覧ください
http://jsfiddle.net/PQS3A/

非正方形のキャンバスを作ることも可能ですか? 私はキャンバスの高さと幅をハードコーディングする必要はありません。モバイルデバイスを含む、より大きいまたは小さい画面では動的に変化するはずです




Links