「object-fit」は Canvas 要素でどのように機能しますか?

キャンバス要素でのオブジェクトフィットを理解する

オブジェクトフィットは、画像または置換された要素がコンテナ内にどのように収まるかを決定する CSS プロパティです。 。単純そうに見えるかもしれませんが、canvas 要素に対する object-fit の動作は混乱を招く可能性があります。

質問:

object-fit は Canvas 要素に適用できますか?そのコンテキストではどのように動作しますか?

答え:

はい、オブジェクトフィットはキャンバス要素に適用できます。ただし、その効果が顕著になるのは、比率の変更または歪みがある場合のみです。 Object-fit は置換された要素にのみ適用され、canvas は置換された要素とみなされます。

例:

動作を説明するための例を見てみましょう:

<code class="html"><div class="box">
  <canvas width="200" height="200"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div></code>

この例では、キャンバス要素に異なるオブジェクトフィット値が設定されています。 object-fit を使用しない場合、キャンバスの内容はコンテナーを満たすために引き伸ばされるか押しつぶされます。

• object-fit:contain: キャンバスの内容は、オブジェクトフィットを使用せずにコンテナー内に収まるように拡大縮小されます。歪み。
• object-fit:cover: キャンバスの内容がコンテナを埋めるように切り取られます。

明示的な寸法を指定すると、この動作をより明確に確認できます。キャンバス コンテナーと、JavaScript を使用したキャンバス内の描画コンテンツ用。

以上が「object-fit」は Canvas 要素でどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。