Maison > Article > interface Web > Comment créer un cercle avec une couleur de fond en utilisant FabricJS ?

Comment créer un cercle avec une couleur de fond en utilisant FabricJS ?

WBOYavant: 2023-08-30 16:37:091142parcourir

如何使用 FabricJS 创建一个带有背景颜色的圆形？

Dans ce tutoriel, nous allons créer un cercle avec une couleur de fond en utilisant FabricJs. Les cercles sont l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. La propriété backgroundColor nous permet de spécifier une couleur pour l'arrière-plan d'un objet. C'est la couleur du conteneur carré (là où se trouve le cercle).

Syntaxe

new fabric.Circle({ backgroundColor: String }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre objet. En utilisant ce paramètre, vous pouvez modifier les propriétés liées au Cercle telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés, dont backgroundColor est sa propriété.

Option Key

backgroundColor - Cette propriété accepte une String qui détermine la couleur de l'arrière-plan de l'objet. La valeur peut être une valeur hexadécimale, une valeur rgba ou simplement le nom de la couleur que nous voulons donner à l'arrière-plan.

Exemple 1

Passage de la propriété backgroundColor en tant que clé avec une valeur hexadécimale

Regardons un exemple d'attribution d'une couleur d'arrière-plan à un objet circulaire à l'aide de valeurs de couleur hexadécimales. Dans cet exemple, nous avons utilisé le code couleur hexadécimal #d0db61, qui est une couleur kaki foncé.

<!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 circle with a background colour using FabricJS</h2>
      <p>Notice the dark-khaki background around the circle. It appears as we have applied the <b>backgroundColor</b> property and assigned it a Hex color code. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "#74c365",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: "#d0db61",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Exemple 2

Passage de l'attribut backgroundColor comme clé avec la valeur rgba

Nous pouvons utiliser les valeurs RGBA (rouge, bleu, vert et alpha) au lieu des codes de couleur hexadécimaux. Le paramètre alpha spécifie l'opacité de la couleur. Dans cet exemple, nous avons utilisé la valeur rgba (255,0,0,0.7), qui est rouge avec une opacité de 0,7.

<!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 circle with a background colour using FabricJS</h2>
      <p>Notice the orange-red background around the circle. Here we have used the <b>backgroundColor</b> property and assigned it an &#39;rgba&#39; value. </p>
      <canvas id="canvas"></canvas>
 
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            backgroundColor: "rgba(255,0,0,0.7)",
         });

         // Adding it to the canvas
         canvas.add(cir);
         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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment changer la forme d'une zone de texte en utilisant JavaScript ?Article suivant：Comment changer la forme d'une zone de texte en utilisant JavaScript ?

Articles Liés

Voir plus