In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einem Hintergrundbild. In FabricJS gibt es zwei Methoden, um das Hintergrundbild der Leinwand zu ändern.
Die erste Möglichkeit besteht darin, die Canvas-Klasse selbst zu verwenden und das backgroundImage zu übergeben.
Die zweite Methode ist die Verwendung der Methode setBackgroundColor. Lassen Sie uns sie anhand eines Beispiels verstehen.
In der ersten Methode verwenden wir die Canvas-Klasse selbst, indem wir backgroundImage im zweiten Parameter der Klasse übergeben. Zur Grammatik
new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)
Element - Dieser Parameter ist Element selbst, Sie können
<!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 Canvas with a Background Image in Fabric.js </h2> <canvas id="canvas"> </canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png", }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)
<!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 Canvas with a Background Image in Fabric.js </h2> <p> Here we have used the setBackgroundImage method. </p> <canvas id="canvas"> </canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); // Image URL var imageURL = "https://www.tutorialspoint.com/tools/images/logo.png"; canvas.setBackgroundImage(imageURL, canvas.renderAll.bind(canvas), { backgroundImageOpacity: 1, originX: "left", originY: "top", top: 90, left: 70, scaleX: 1.1, scaleY: 1.1, }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Leinwand mit einem Hintergrundbild?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!