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

Wie erstelle ich mit FabricJS eine Leinwand mit Hintergrundfarbe?

王林nach vorne: 2023-09-14 20:09:08676Durchsuche

如何使用 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)

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>

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>

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!

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 stelle ich mit FabricJS die Position einer Ellipse von links ein?Nächster Artikel：Wie stelle ich mit FabricJS die Position einer Ellipse von links ein?

In Verbindung stehende Artikel

Mehr sehen