Wie funktioniert „Object-Fit“ mit Canvas-Elementen?

Objektanpassung mit Canvas-Elementen verstehen

Objektanpassung ist eine CSS-Eigenschaft, die bestimmt, wie ein Bild oder ein ersetztes Element in seinen Container passt . Auch wenn es einfach erscheinen mag, kann das Verhalten der Objektanpassung bei Canvas-Elementen verwirrend sein.

Frage:

Kann die Objektanpassung auf Canvas-Elemente angewendet werden? Wie verhält es sich in diesem Zusammenhang?

Antwort:

Ja, die Objektanpassung kann auf Canvas-Elemente angewendet werden. Der Effekt macht sich jedoch nur bei einer Verhältnisänderung oder Verzerrung bemerkbar. Die Objektanpassung gilt nur für ersetzte Elemente und Canvas wird als ersetztes Element betrachtet.

Beispiel:

Sehen wir uns ein Beispiel an, um das Verhalten zu veranschaulichen:

<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>

In diesem Beispiel haben die Canvas-Elemente unterschiedliche Objektanpassungswerte. Ohne Objektanpassung wird der Canvas-Inhalt gestreckt oder gestaucht, um den Container zu füllen.

• object-fit:contain: Der Canvas-Inhalt wird so skaliert, dass er ohne in den Container passt Verzerrung.
• object-fit:cover: Der Leinwandinhalt wird zugeschnitten, um den Container auszufüllen.

Sie können dieses Verhalten deutlicher erkennen, indem Sie explizite Abmessungen angeben für den Canvas-Container und Zeichnen von Inhalten innerhalb der Canvas mithilfe von JavaScript.

Das obige ist der detaillierte Inhalt vonWie funktioniert „Object-Fit“ mit Canvas-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!