web-dev-qa-db-ja.com

キャンバスを親と同じ幅と高さにします

進行状況バーをシミュレートするために長方形のキャンバスを作成したいのですが、キャンバスの幅と高さを100％に設定すると、実際には親と同じくらい高く、広くなりません

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

正方形でないキャンバスを作成することも可能ですか？キャンバスの高さと幅をハードコードしたくない

javascripthtmlcsshtml5canvas
58
user1118019

以下は、問題を修正する実例です。

http://jsfiddle.net/PQS3A/7/

あなたの例にはいくつかの問題がありました：

  1. <div>には、heightまたはwidth属性がありません。 CSSを使用してこれらを設定する必要があります。
  2. Divのサイズが正しくても、デフォルトのposition:staticを使用していました。これは、divが子の位置決め親ではないことを意味します。キャンバスをdivと同じサイズにする場合は、divをposition:relative（またはabsoluteまたはfixed）に設定する必要があります。
  3. Canvasのwidthおよびheight属性は、描画するデータのピクセル数（画像の実際のピクセルなど）を指定し、とは別ですキャンバスの表示サイズ。これらの属性は整数に設定する必要があります。

上記にリンクされている例では、CSSを使用してdivサイズを設定し、配置された親にします。 JS関数（以下に示す）を作成して、キャンバスを配置された親と同じdisplayサイズに設定し、内部widthおよびheightプロパティ。これにより、表示されるピクセル数と同じになります。

var canvas = document.querySelector('canvas');
fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}
102
Phrogz

実際に親要素と同じ大きさにしたい場合は、キャンバスのwidthおよびheight属性を使用します。 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の高さと幅の属性を使用する場合、style="width:100%; height:100%;"、その後、あなたはちょうどキャンバスを伸ばしています。これにより、キャンバスに描くすべてのものが引き伸ばされて見えるようになります。

JSFiddle JQueryソリューションの場合。

JSFiddle Javascriptソリューションの場合。

8
Brant Olsen

タグの属性の代わりにCSSプロパティを使用します。

<div style="background-color:blue;width:140px;height:20px">
    <canvas style="background-color: red;width:100%;height:100%">
    </canvas>
</div>​

それはうまくいくようです

0
Kristoffer Sall-Storgaard