Heim > Artikel > Web-Frontend > Wie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?
In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Deckkraft einer Ellipse festlegen. 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 das Ellipsenobjekt 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.Ellipse({ opacity: Number }: Object)
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserer Ellipse zusätzliche Anpassungsmöglichkeiten bietet. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Deckkraft ein Attribut ist.
Opacity – Diese Eigenschaft akzeptiert eine Zahl强>, mit der wir die Deckkraft des Objekts steuern können. Der Standardwert der Eigenschaft opacity ist 1.
Standardaussehen des Ellipsenobjekts
Sehen wir uns einen Codeausschnitt an, um zu sehen, wie unser Ellipsenobjekt mit dem Standardwert der Eigenschaft opacity aussieht. In diesem Beispiel übergeben wir keinen Opazitätsschlüssel an die Klasse, wie unten gezeigt –
<!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>How to set the opacity of Ellipse using FabricJS?</h2> <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </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: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Übergeben des Attributs opacity als Schlüssel
In diesem Beispiel werden wir sehen, wie der Wert opacity zugewiesen wird Die Eigenschaft ändert die Deckkraft des Ellipsenobjekts im Canvas. Hier verwenden wir 0,3 als Deckkraft, wodurch unser Ellipsenobjekt halbtransparent und nicht vollständig undurchsichtig erscheint.
<!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>How to set the opacity of Ellipse using FabricJS?</h2> <p>Here we have set the <b>opacity</b> at 0.3, which is why the ellipse is less opaque.</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: 115, top: 50, rx: 80, ry: 50, fill: "#ff1493", opacity: 0.3, }); // Adding it to the canvas canvas.add(ellipse); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft einer Ellipse mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!