Comment créer un canevas avec FabricJS ?-js tutoriel-php.cn

Comment créer un canevas avec FabricJS ?

王林

Libérer： 2023-08-22 22:01:02

avant

839 Les gens l'ont consulté

Comment créer un canevas avec FabricJS ?

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)

Copier après la connexion

Parameters

element − Ce paramètre est l'élément lui-même, vous pouvez utiliser document.getElementById() ou identifiant de l'élément lui-même vient Get. Le canevas FabricJS sera initialisé sur cet élément.
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>

Copier après la connexion

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>

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!