Maison >interface Web >js tutoriel >Comment définir l'opacité du cercle à l'aide de FabricJS ?

Comment définir l'opacité du cercle à l'aide de FabricJS ?

WBOYavant: 2023-09-03 17:17:07616parcourir

如何使用 FabricJS 设置圆的不透明度？

Dans ce tutoriel, nous apprendrons comment définir l'opacité d'un cercle à l'aide de FabricJS. Les cercles sont l'une des différentes formes fournies par FabricJS. Pour créer un cercle, nous allons créer une instance de la classe Fabric.Circle et l'ajouter au canevas. Nous pouvons personnaliser l'objet circulaire en ajoutant une couleur de remplissage, en supprimant ses bordures et même en modifiant ses dimensions. De même, nous pouvons également utiliser la propriété opacity pour modifier son opacité.

Syntaxe

new fabric.Circle({ opacity: Number }: Object)

Paramètres

Options (facultatif) - Ce paramètre est un objet qui offre une personnalisation supplémentaire pour nos cercles. Avec ce paramètre, il est possible de changer la couleur, le curseur, la largeur de la bordure et bien d'autres propriétés associées à l'objet pour lequel opacity est un attribut

touche d'option

opacity - cette propriété accepte nombres Permet de contrôler l'opacité de l'objet. La valeur par défaut de l'attribut d'opacité est 1.

Exemple 1

Apparence par défaut d'un objet circulaire

Regardons un extrait de code pour voir à quoi ressemble notre objet circulaire lorsque nous utilisons la valeur par défaut de la propriété opacity.

<!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>Setting the opacity of Circle using FabricJS</h2>
      <p>Here we haven&#39;t used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

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

Exemple 2

Passage de la propriété Opacity comme clé

Dans cet exemple, nous verrons comment l'attribution d'une valeur à la propriété Opacity modifie l'opacité d'un objet circulaire dans notre canevas. Ici, nous utilisons 0,3 comme opacité, ce qui donne à notre objet circulaire un aspect semi-transparent au lieu de complètement opaque.

<!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>Setting the opacity of Circle using FabricJS</h2>
      <p>Here we have set the <b>opacity</b> at 0.3, which is why the circle appears dull. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493",
            opacity: 0.3
         });

         // Adding it to the 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!

Déclaration：

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

Article précédent：Méthodes pratiques de développement basées sur les testsArticle suivant：Méthodes pratiques de développement basées sur les tests

Articles Liés

Voir plus