Maison >interface Web >js tutoriel >Comment créer un canevas avec une image de fond en utilisant FabricJS ?
Dans cet article, nous allons créer un canevas avec une image d'arrière-plan à l'aide de FabricJS. Il existe deux méthodes dans FabricJS pour modifier l'image d'arrière-plan du canevas.
La première façon consiste à utiliser la classe Canvas elle-même et à transmettre la backgroundImage.
La deuxième méthode consiste à utiliser la méthode setBackgroundColor. Comprenons-les à travers un exemple.
Dans la première méthode, nous utiliserons la classe Canvas elle-même en passant backgroundImage dans le deuxième paramètre de la classe. Re grammaire
new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)
Élément -Ce paramètre est Élément lui-même, vous pouvez utiliser
<!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>🎜Méthode 2 : Utilisez la méthode setBackgroundImage 🎜🎜Nous pouvons également utiliser la méthode 🎜setBackgroundImage🎜 fournie dans la classe Canvas après avoir créé le canevas. Examinons de plus près comment y parvenir. 🎜🎜Syntaxe🎜
canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)🎜Parameters🎜🎜🎜🎜🎜🎜image🎜🎜 - Ce paramètre accepte un fabric.Image ou une URL de chaîne entre guillemets de l'image sur laquelle nous voulons définir l'arrière-plan. 🎜🎜🎜🎜🎜🎜callback🎜🎜 - Ce paramètre prend une fonction de rappel qui est appelée lorsque l'image est chargée et définie comme arrière-plan. 🎜🎜🎜🎜🎜🎜Options (facultatif) : 🎜🎜 - Ce paramètre est l'objet dans lequel nous pouvons spécifier les options de l'image d'arrière-plan. On peut changer l'opacité, agrandir ou réduire l'image, etc. 🎜🎜🎜🎜Exemple 2🎜🎜Tout d'abord, nous attribuons l'URL de l'image à une variable et l'utilisons comme premier paramètre. Dans le deuxième paramètre, nous lierons le canevas à l'aide de la méthode renderAll() après avoir défini l'image d'arrière-plan comme indiqué dans le code ci-dessous -🎜
<!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>🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!