Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?

Wie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?

WBOYnach vorne: 2023-08-30 16:37:091098Durchsuche

如何使用 FabricJS 创建一个带有背景颜色的圆形？

In diesem Tutorial erstellen wir mit FabricJs einen Kreis mit einer Hintergrundfarbe. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, müssen wir eine Instanz der Fabric.Circle-Klasse erstellen und sie der Leinwand hinzufügen. Mit der Eigenschaft „backgroundColor“ können wir eine Farbe für den Hintergrund eines Objekts angeben. Es ist die Farbe des quadratischen Behälters (wo sich der Kreis befindet). Syntax

new fabric.Circle({ backgroundColor: String }: Object)

Parameter

Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf den Kreis beziehen, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften, von denen backgroundColor seine Eigenschaft ist.

backgroundColor – Diese Eigenschaft akzeptiert einen String, der die Farbe des Objekthintergrunds bestimmt. Der Wert kann ein Hexadezimalwert, ein RGBA-Wert oder einfach der Name der Farbe sein, die der Hintergrund haben soll.

backgroundColor als Schlüssel mit einem Hexadezimalwert Sehen wir uns ein Beispiel für die Zuweisung einer Hintergrundfarbe zu einem kreisförmigen Objekt mithilfe hexadezimaler Farbwerte an. In diesem Beispiel haben wir den Hex-Farbcode

verwendet, bei dem es sich um eine dunkle Khaki-Farbe handelt.

<!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>Creating a circle with a background colour using FabricJS</h2>
      <p>Notice the dark-khaki background around the circle. It appears as we have applied the <b>backgroundColor</b> property and assigned it a Hex color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#74c365",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: "#d0db61",
         });

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

backgroundColor als Schlüssel mit RGBA-Wert Wir können

(Rot, Blau, Grün und Alpha)-Werte anstelle von Hex-Farbcodes verwenden. Der Alpha-Parameter gibt die Deckkraft der Farbe an. In diesem Beispiel haben wir den rgba-Wert (255,0,0,0,7) verwendet, der rot ist und eine Deckkraft von 0,7 hat.

<!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>Creating a circle with a background colour using FabricJS</h2>
      <p>Notice the orange-red background around the circle. Here we have used the <b>backgroundColor</b> property and assigned it an &#39;rgba&#39; value. </p>
      <canvas id="canvas"></canvas>
 
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            backgroundColor: "rgba(255,0,0,0.7)",
         });

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Wie ändere ich die Form eines Textbereichs mit JavaScript?Nächster Artikel：Wie ändere ich die Form eines Textbereichs mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen