In diesem Tutorial lernen wir, wie man die Deckkraft eines Kreises mit FabricJS festlegt. Kreise sind eine der verschiedenen Formen, die FabricJS bereitstellt. Um einen Kreis zu erstellen, erstellen wir eine Instanz der Fabric.Circle-Klasse und fügen sie der Leinwand hinzu. Wir können das kreisförmige Objekt 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.
new fabric.Circle({ opacity: Number }: Object)Optionen (optional) – Dieser Parameter ist ein Objekt< /em>, das zusätzliche Anpassungen für unsere Kreise ermöglicht. Mit diesem Parameter ist es möglich, die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften zu ändern, die mit dem Objekt verknüpft sind, für das Opacity ein Attribut ist
Opacity - diese Eigenschaft akzeptiert Zahlen Ermöglicht uns, die Deckkraft des Objekts zu steuern. Der Standardwert des Opazitätsattributs ist 1.
Standardaussehen eines kreisförmigen Objekts
Sehen wir uns einen Codeausschnitt an, um zu sehen, wie unser kreisförmiges Objekt aussieht, wenn der Standardwert der Eigenschaft opacity verwendet wird.
<!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>Setting the opacity of Circle using FabricJS</h2>
<p>Here we haven't used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Übergabe der Opacity-Eigenschaft als Schlüssel
In diesem Beispiel werden wir sehen, wie die Zuweisung eines Werts zur Opacity-Eigenschaft die Deckkraft eines kreisförmigen Objekts in unserer Leinwand ändert. Hier verwenden wir 0,3 als Deckkraft, wodurch unser rundes Objekt halbtransparent statt völlig undurchsichtig aussieht.
<!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>Setting the opacity of Circle using FabricJS</h2>
<p>Here we have set the <b>opacity</b> at 0.3, which is why the circle appears dull. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#ff1493",
opacity: 0.3
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft eines Kreises mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die Webseite kann nicht geöffnet werden
Sortierfunktion Python-Nutzung
Ripple-Handelsplattform
WLAN ist verbunden, aber es gibt ein Ausrufezeichen
Was beinhalten E-Commerce-Plattformen?
Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen
Wie ist die Leistung von PHP8?
So löschen Sie Float in CSS
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
