Maison > Article > interface Web > Comment créer un canevas avec FabricJS ?

Comment créer un canevas avec FabricJS ?

王林avant: 2023-08-22 22:01:02792parcourir

Dans cet article, nous allons créer un canevas à l'aide de FabricJS, mais avant cela, comprenons ce qu'est le canevas. Pour dessiner des graphiques sur des pages Web, nous disposons d’une API Web appelée Canvas API. Cette API convient parfaitement pour dessiner des formes basiques, mais il devient très difficile d'ajouter des interactions ou de dessiner des formes complexes. Par conséquent, FabricJS a émergé, une bibliothèque construite sur l'API Canvas. Pour utiliser FabricJS, la première chose à faire est de créer un canevas FabricJS.

Syntaxe

new fabric.Canvas(element: HTMLElement|String, options: Object)

Parameters

element − Ce paramètre est l'élément lui-même, vous pouvez utiliser document.getElementById() ou
options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire du canevas. En utilisant ce paramètre, nous pouvons modifier différentes propriétés du canevas comme la couleur, le curseur, la largeur de la bordure, etc.

Exemple 1

Passer l'identifiant sous forme de chaîne

Regardons un exemple de code de création d'un canevas à l'aide de FabricJS. Étant donné que FabricJS fonctionne au-dessus de l'API Canvas, nous allons créer un élément HTML à l'aide de 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 using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Exemple 2

Passage d'un élément en tant qu'élément HTML

Au lieu de transmettre id directement à l'API FabricJS, puis de transmettre cet élément à l'API FabricJS, nous pouvons obtenir l'élément en utilisant document.getElementById() Comme indiqué ci-dessous −

<!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 using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var element = document.getElementById(&#39;canvas&#39;);
      var canvas = new fabric.Canvas(element);
      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 comparer deux objets tableau JavaScript en utilisant jQuery/JavaScript ?Article suivant：Comment comparer deux objets tableau JavaScript en utilisant jQuery/JavaScript ?

Articles Liés

Voir plus