97

プログレスバーをシミュレートするために長方形のキャンバスを作成したいのですが、キャンバスの幅と高さを100％に設定すると、実際には親ほど高くも広くもなりません。

以下の例を参照してください
http://jsfiddle.net/PQS3A/

非正方形のキャンバスを作ることさえ可能ですか？キャンバスの高さと幅をハードコーディングしたくないのは、モバイルデバイスを含め、大画面または小画面で表示すると動的に変化するためです。

4

3 に答える 3

162

問題を修正する実際の例を次に示します。

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

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

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

上記にリンクされている例では、CSSを使用してdivサイズを設定し、配置された親にします。JS関数（以下に表示）を作成して、配置された親と同じ表示サイズになるようにキャンバスを設定し、次に、表示と同じピクセル数になるように内部プロパティ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;
}
于 2012-04-18T18:34:36.357 に答える
16

キャンバスを実際に親要素と同じ大きさにしたい場合は、キャンバスの属性widthと属性を使用します。JQueryheightを使用して設定できます。

$(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%;"、キャンバスを引き伸ばすだけです。これにより、キャンバスに描画するすべてのものが引き伸ばされたように見えます。

JQueryソリューションのJSFiddle。

JSFiddleforJavascriptソリューション。

于 2012-04-18T17:46:10.967 に答える
0

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

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

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

于 2012-04-18T17:44:40.343 に答える