suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich eine Leinwand mit FabricJS?

Wie erstelle ich eine Leinwand mit FabricJS?

王林
王林nach vorne
2023-08-22 22:01:02799Durchsuche

Wie erstelle ich eine Leinwand mit FabricJS?

In diesem Artikel erstellen wir eine Leinwand mit FabricJS, aber vorher wollen wir verstehen, was eine Leinwand ist. Zum Zeichnen von Grafiken auf Webseiten verfügen wir über eine Web-API namens Canvas API. Diese API eignet sich gut zum Zeichnen grundlegender Formen, es wird jedoch sehr schwierig, Interaktionen hinzuzufügen oder komplexe Formen zu zeichnen. Daher entstand FabricJS, eine Bibliothek, die auf der Canvas-API aufbaut. Um FabricJS verwenden zu können, müssen Sie zunächst einen FabricJS-Canvas erstellen.

Syntax

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

Parameter

  • element − Dieser Parameter ist das Element selbst, Sie können document.getElementById() oder Element selbst-ID kommt Get. Der FabricJS-Canvas wird auf diesem Element initialisiert.

  • options (optional) − Dieser Parameter ist ein Objekt, das eine zusätzliche Anpassung der Leinwand ermöglicht. Mit diesem Parameter können wir verschiedene Eigenschaften der Leinwand wie Farbe, Cursor, Rahmenbreite usw. ändern.

Beispiel 1

ID als String übergeben

Sehen wir uns ein Codebeispiel für die Erstellung einer Leinwand mit FabricJS an. Da FabricJS auf der Canvas-API basiert, erstellen wir ein HTML-Element mit dem -Tag und geben ihm eine ID. Anschließend übergeben wir diese ID an die FabricJS-API, damit diese die FabricJS-Canvas-Instanz auf dem -Tag initialisieren kann. 

<!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>

Beispiel 2

Element als HTMLElement übergeben

Anstatt id direkt an die FabricJS-API zu übergeben und dieses Element dann an die FabricJS-API zu übergeben, können wir das Element mit document.getElementById() abrufen, wie unten gezeigt −

<!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>

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Leinwand mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html 字符串 对象 canvas
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie vergleiche ich zwei JavaScript-Array-Objekte mit jQuery/JavaScript?Nächster Artikel：Wie vergleiche ich zwei JavaScript-Array-Objekte mit jQuery/JavaScript?

In Verbindung stehende Artikel

Mehr sehen