Wie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?
Aug 24, 2023 pm 02:37 PM
In diesem Tutorial lernen wir, wie man das Aussehen eines Ellipse-Objekts ändert, indem man seine Füllfarbe mit FabricJS ändert. 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 die Füllfarbe mithilfe der Eigenschaft fill ändern, mit der wir die Füllfarbe eines Objekts festlegen können.
Syntax
new fabric.Ellipse({ fill: String }: Object)Parameter
Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das unserer Ellipse zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen Füllung die Eigenschaft ist.
Option Key
Padding – Diese Eigenschaft akzeptiert einen String-Wert, der es uns ermöglicht, die PaddingFarbe des Objekts zu ändern. Der Standardwert ist rgb(0,0,0), also Schwarz.
Beispiel 1
Standard PaddingFarbe des Ellipsenobjekts
Sehen wir uns einen Code an, der die Standardfüllfarbe des Ellipsenobjekts FabricJS zeigt. Wenn wir beim Erstellen des Ellipsenobjekts die Eigenschaft fill komplett überspringen, wird es schwarz gerendert. <!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 id="How-to-set-the-fill-color-of-Ellipse-using-FabricJS">How to set the fill color of Ellipse using FabricJS?</h2>
<p>Observe the ellipse is rendered black as we have not applied the <b>fill</b> property. This is the default fill color. </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: 215,
top: 100,
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Wir können dem
fill-Attribut auch einen beliebigen Farbnamen oder RGBA-Wert zuweisen. In diesem Beispiel haben wir ihm den Wert „skyBlue“ zugewiesen und die Füllfarbe entsprechend geändert. Das obige ist der detaillierte Inhalt vonWie stelle ich die Füllfarbe einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!<!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 id="How-to-set-the-fill-color-of-Ellipse-using-FabricJS">How to set the fill color of Ellipse using FabricJS?</h2>
<p>Here we have used the <b>fill</b> property and used skyBlue color.</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: 215,
top: 100,
fill: "skyBlue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Ersetzen Sie Stringzeichen in JavaScript
JQuery überprüfen, ob das Datum gültig ist
Mar 01, 2025 am 08:51 AM
JQuery überprüfen, ob das Datum gültig ist
HTTP-Debugging mit Knoten und HTTP-Konsole
Mar 01, 2025 am 01:37 AM
HTTP-Debugging mit Knoten und HTTP-Konsole
JQuery fügen Sie Scrollbar zu Div hinzu
Mar 01, 2025 am 01:30 AM
JQuery fügen Sie Scrollbar zu Div hinzu
Benutzerdefinierte Google -Search -API -Setup -Tutorial
Mar 04, 2025 am 01:06 AM
Benutzerdefinierte Google -Search -API -Setup -Tutorial
