Maison > interface Web > js tutoriel > Comment créer un canevas avec une couleur de fond à l'aide de FabricJS ?

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

王林
Libérer: 2023-09-14 20:09:08
avant
808 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 lui-même, vous pouvez utiliser document.getElementById() ou le id de l'élément lui-même Dérivé . Le canevas FabricJS sera initialisé sur cet é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 et lui attribuer un id.

De plus, nous transmettons cet identifiant à l'API FabricJS afin qu'elle puisse initialiser l'instance FabricJS Canvas sur la balise . Dans le deuxième paramètre nous passerons un objet avec la clé backgroundColor et la valeur de couleur que nous voulons.

<!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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal