Heim >Web-Frontend >js-Tutorial >Wie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?

Wie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?

WBOYnach vorne: 2023-08-24 16:09:131278Durchsuche

如何使用 FabricJS 设置椭圆的不透明度？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Deckkraft einer Ellipse festlegen. Das Oval ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um eine Ellipse zu erstellen, müssen wir eine Instanz der Fabric.Ellipse-Klasse erstellen und sie der Leinwand hinzufügen. Wir können das Ellipsenobjekt anpassen, indem wir eine Füllfarbe hinzufügen, seine Ränder entfernen und sogar seine Abmessungen ändern. Ebenso können wir die Eigenschaft opacity verwenden, um ihre Deckkraft zu ändern.

Syntax

new fabric.Ellipse({ opacity: Number }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Deckkraft ein Attribut ist.

Optionsschlüssel

Opacity – Diese Eigenschaft akzeptiert eine Zahl强>, mit der wir die Deckkraft des Objekts steuern können. Der Standardwert der Eigenschaft opacity ist 1.

Beispiel 1

Standardaussehen des Ellipsenobjekts

Sehen wir uns einen Codeausschnitt an, um zu sehen, wie unser Ellipsenobjekt mit dem Standardwert der Eigenschaft opacity aussieht. In diesem Beispiel übergeben wir keinen Opazitätsschlüssel an die Klasse, wie unten gezeigt –

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Beispiel 2

Übergeben des Attributs opacity als Schlüssel

In diesem Beispiel werden wir sehen, wie der Wert opacity zugewiesen wird Die Eigenschaft ändert die Deckkraft des Ellipsenobjekts im Canvas. Hier verwenden wir 0,3 als Deckkraft, wodurch unser Ellipsenobjekt halbtransparent und nicht vollständig undurchsichtig erscheint.

<!DOCTYPE html>
<html>
   <head>
      <!-- Adding the Fabric JS Library-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   </head>

   <body>
      <h2>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
            opacity: 0.3,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie löst man mit JavaScript sofort eine setInterval-Schleife aus?Nächster Artikel：Wie löst man mit JavaScript sofort eine setInterval-Schleife aus?

In Verbindung stehende Artikel

Mehr sehen