Wie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?

WBOY

Freigeben： 2023-08-30 16:37:09

nach vorne

1134 Leute haben es durchsucht

如何使用 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)

Nach dem Login kopieren

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< /em> seine Eigenschaft ist.

Optionstaste
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.
Beispiel 1
Übergabe der Eigenschaft
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
#d0db61
verwendet, bei dem es sich um eine dunkle Khaki-Farbe handelt.
<!DOCTYPE html> <html> <head>  <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>
Nach dem Login kopieren
Beispiel 2
Übergabe des Attributs
backgroundColor als Schlüssel mit RGBA-Wert Wir können
RGBA
(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>  <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 'rgba' 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>
Nach dem Login kopieren
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!