如何使用FabricJS建立畫布？-js教程-PHP中文網

如何使用FabricJS建立畫布？

王林

發布： 2023-08-22 22:01:02

轉載

805 人瀏覽過

如何使用FabricJS建立畫布？

在本文中，我們將使用FabricJS建立一個畫布，但在此之前，讓我們先了解一下什麼是畫布。為了在網頁上繪製圖形，我們有一個名為Canvas API的Web API。這個API適用於繪製基本形狀，但是添加互動或繪製複雜形狀變得非常困難。因此，FabricJS出現了，它是建立在Canvas API之上的函式庫。要使用FabricJS，首先需要做的是建立一個FabricJS畫布。

語法

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

登入後複製

參數

#element − 此參數是元素本身，可以使用document.getElementById()或元素本身的id來取得。 FabricJS畫布將在此元素上初始化。
options (可選) − 此參數是一個對象，提供了對畫布的其他自訂。使用此參數，我們可以變更畫布的不同屬性，例如顏色、遊標、邊框寬度等。

範例1

將id作為字串傳遞

讓我們看一個使用FabricJS建立畫布的程式碼範例。由於FabricJS是在Canvas 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 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>

登入後複製

範例2

將元素當作HTMLElement傳遞

我們可以使用document.getElementById()來取得元素，而不是直接將id傳遞給FabricJS API，然後將該元素傳遞給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 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>

登入後複製

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