Heim >Web-Frontend >js-Tutorial >Wie erstelle ich mit FabricJS einen Kreis mit Hintergrundfarbe?
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)
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
#d0db61 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>
Beispiel 2
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>
<!-- 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 '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>
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!