Wie erstelle ich mit FabricJS eine Leinwand mit Hintergrundfarbe?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS eine Leinwand mit Hintergrundfarbe?

王林

Freigeben： 2023-09-14 20:09:08

nach vorne

608 Leute haben es durchsucht

如何使用 FabricJS 创建具有背景颜色的画布？

In diesem Artikel erstellen wir mit FabricJS eine Leinwand mit einer bestimmten Hintergrundfarbe. Die von der FabricJS-API bereitgestellte Standardhintergrundfarbe ist Weiß, die mit dem zweiten Parameter angepasst werden kann.

Syntax

new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)

Nach dem Login kopieren

Parameter

Element – Dieser Parameter ist das
Options – Dieser Parameter ist ein Objekt, das unserer Leinwand zusätzliche Anpassbarkeit verleiht, und backgroundColor ist einer davon, der uns dabei hilft, die Hintergrundfarbe anzupassen.

Beispiel 1

Sehen wir uns an, wie das geht Erstellen Sie mit FabricJS eine Leinwand mit Hintergrundfarbe. Da FabricJS auf der Canvas-API basiert, erstellen wir ein HTML-Element mit dem

Darüber hinaus übergeben wir diese ID an die FabricJS-API, damit diese die FabricJS Canvas-Instanz auf dem

<!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 with a background color using FabricJS</h2>
   <p>Here we have used &#39;cyan&#39; as the background color.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Lassen Sie uns ein weiteres Beispiel geben. Hier erstellen wir eine Leinwand mit einer Hintergrundfarbe und erstellen ein Kreisobjekt auf der Leinwand.

<!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 with a background color using FabricJS</h2>
   <p>Here we have created a canvas with a background color and a circle object on the canvas</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "red",
         hoverCursor: &#39;not-allowed&#39;,
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Nach dem Login kopieren

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