recherche

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 ?

王林
王林avant
2023-09-14 20:09:08727parcourir

如何使用 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)

Parameters

  • Element - Ce paramètre est l'élément em> 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>

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>

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!

html 对象 canvas
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment définir la position d'une ellipse depuis la gauche à l'aide de FabricJS ?Article suivant：Comment définir la position d'une ellipse depuis la gauche à l'aide de FabricJS ?

Articles Liés

Voir plus