首頁 >web前端 >js教程 >如何使用 FabricJS 創建具有背景顏色的畫布？

如何使用 FabricJS 創建具有背景顏色的畫布？

王林轉載: 2023-09-14 20:09:08727瀏覽

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

在本文中，我們將使用 FabricJS 建立具有給定背景顏色的畫布。 FabricJS API 提供的預設背景顏色是白色，可以使用第二個參數進行自訂。

語法

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

參數

# - 此參數是
選項 - 此參數是一個對象，它提供了額外的可自訂性我們的畫布和backgroundColor 就是其中之一，它將幫助我們自訂背景顏色

範例1

讓我們看看如何使用FabricJS 建立具有背景顏色的畫布。由於 FabricJS 在 Canvas API 之上運作，因此我們將使用

此外，我們將該 id 傳遞給FabricJS API，以便它可以在

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

範例 2

我們再舉一個例子。這裡我們將創建一個具有背景顏色的畫布，並在畫布上建立一個 Circle 物件。

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

以上是如何使用 FabricJS 創建具有背景顏色的畫布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html 对象 canvas

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 設定橢圓從左側的位置？下一篇：如何使用 FabricJS 設定橢圓從左側的位置？

看更多