如何使用 Fabric.js 為畫布上的圓形新增陰影？

我們可以透過建立新的圓形物件，然後將物件的“shadow”屬性設定為包含所需陰影屬性（例如顏色和偏移量）的物件來為畫布上的圓形新增陰影。 

Fabric.js 是一個開源的 JavaScript 庫，它允許開發者輕鬆建立和操作 HTML5 畫布元素。它透過提供一組強大且靈活的 API 來簡化建立、編輯和動畫化畫布元素的過程。

使用 Fabric.js，開發者可以建立複雜的畫布圖形、動畫和互動式元素，而無需處理底層的畫布 API。它還提供面向物件的結構，使將畫布元素作為物件進行操作並執行縮放、旋轉和移動等常見操作變得容易。它廣泛應用於 Web 開發、遊戲開發以及其他需要畫布功能的互動式應用程式。

Fabric.js 是一個用於處理面向物件畫布圖形的庫。它提供易於使用的 API 用於建立和操作畫布元素，例如形狀、文字和影像。使用 Fabric.js，您可以使用 JavaScript 建立複雜的畫布圖形和動畫，而無需進行底層的畫布 API 呼叫。它還提供了一組內建物件，例如矩形、圓形和文字，可以使用庫的 API 輕鬆操作這些物件。

此外，fabric.js 還提供了許多有用的功能，例如事件處理、撤消/重做、物件序列化等等。它還具有各種內建過濾器和影像處理功能。

Fabric.js 廣泛應用於 Web 開發，尤其是在建立互動式圖形和圖表以及建立使用者介面元素（例如影像編輯器和自定義表單輸入）方面。

方法

  • 使用 Fabric.js 建立畫布物件：

var canvas = new fabric.Canvas('canvas');

  • 建立圓形物件：

var circle = new fabric.Circle({
   radius: 50,
   fill: 'red',
   left: 100,
   top: 100
});

  • 設定圓形物件的陰影屬性：

circle.setShadow({
   color: 'black',
   offsetX: 5,
   offsetY: 5,
   blur: 10
});

  • 將圓形物件新增到畫布：

canvas.add(circle);

  • 渲染畫布：

canvas.renderAll();

注意：您可以調整 offsetX、offsetY 和 blur 值來調整陰影的位置和強度。此外，您可以使用不同的顏色來設定陰影。

示例

<!DOCTYPE html>
<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
   <body>
      <canvas id="canvas"></canvas> 
      <script>
         var canvas = new fabric.Canvas('canvas');
         var circle = new fabric.Circle({
            radius: 50,
            fill: 'red',
            left: 100,
            top: 100
         });
         circle.setShadow({
            color: 'black',
            offsetX: 5,
            offsetY: 5,
            blur: 10
         });
         canvas.add(circle);
         canvas.renderAll();
      </script>
   </body>
</html>

在這個例子中，我們首先包含 Fabric.js 庫，然後在 HTML body 中建立一個畫布元素。然後，我們使用 Fabric.js 建立一個圓形物件，設定其屬性，並將其新增到畫布。我們還使用 "setShadow" 方法設定圓形物件的陰影屬性。最後，我們渲染畫布以顯示帶有陰影的圓形。

更新於：2023年2月13日

268 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告