Comment créer un canevas avec une couleur de fond à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer un canevas avec une couleur de fond à l'aide de FabricJS ?

王林

Libérer： 2023-09-14 20:09:08

avant

701 Les gens l'ont consulté

如何使用 FabricJS 创建具有背景颜色的画布？

Dans cet article, nous allons créer un canevas avec une couleur d'arrière-plan donnée à l'aide de FabricJS. La couleur d'arrière-plan par défaut fournie par l'API FabricJS est le blanc, qui peut être personnalisée à l'aide du deuxième paramètre.

Syntaxe

new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)

Copier après la connexion

Parameters

Element - Ce paramètre est l'élément
Options - Ce paramètre est un objet qui offre une personnalisation supplémentaire à notre toile et backgroundColor est l'un d'entre eux qui nous aidera à personnaliser la couleur d'arrière-plan

Exemple 1

Voyons comment créez un canevas avec une couleur d'arrière-plan à l'aide de FabricJS. Puisque FabricJS fonctionne au-dessus de l'API Canvas, nous allons créer un élément HTML à l'aide de la balise

De plus, nous transmettons cet identifiant à l'API FabricJS afin qu'elle puisse initialiser l'instance FabricJS Canvas sur la balise

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas with a background color using FabricJS</h2>
   <p>Here we have used &#39;cyan&#39; as the background color.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Donnons un autre exemple. Ici, nous allons créer un canevas avec une couleur d'arrière-plan et créer un objet Cercle sur le canevas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas with a background color using FabricJS</h2>
   <p>Here we have created a canvas with a background color and a circle object on the canvas</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "red",
         hoverCursor: &#39;not-allowed&#39;,
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copier après la connexion

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!