在本教程中,我們將學習如何使用 FabricJS 為三角形添加陰影。三角形是 FabricJS 提供的各種形狀之一。為了創建一個三角形,我們必須建立一個 Fabric.Triangle 類別的實例並將其新增到畫布中。
我們的三角形物件可以透過多種方式自訂,例如更改其尺寸、添加背景顏色,甚至添加陰影。我們可以使用 Shadow 屬性為三角形添加陰影。
new fabric.Triangle({ shadow : fabric.Shadow }: Object)
#選項(可選) - 此參數是一個提供額外自訂的物件到我們的三角形。使用此參數,可以變更與陰影為屬性的物件相關的顏色、遊標、描邊寬度等屬性以及許多其他屬性。
Shadow - 該屬性接受一個fabric.Shadow對象,它允許我們添加陰影到我們的三角形物件。
將陰影物件傳遞給陰影屬性
讓我們看一個程式碼範例來了解如何為陰影屬性指派一個值,以便將陰影新增到三角形物件中。首先,我們需要建立一個新的fabric.Shadow實例,然後將該實例指派給我們的shadow屬性。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing the shadow object to the shadow property</h2> <p>You can see that an orange shadow has been added to the triangle</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a shadow instance var shadow = new fabric.Shadow({ color: "orange", blur: 20, }); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 120, top: 70, width: 90, height: 80, fill: "#228b22", stroke: "#d8e4bc", strokeWidth: 7, shadow: shadow, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
將RGBA 值傳遞給陰影物件
我們也可以透過指定陰影來調整陰影並為其賦予模糊的外觀RGBA 值,代表紅、綠、藍和alpha。 Alpha 決定顏色的不透明度。
<!DOCTYPE html> <html> <head> <!-- Adding the Fabric JS Library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Passing an rgba value to the shadow object</h2> <p>You can see the shadow created using RGBA colour value</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiate a shadow instance var shadow = new fabric.Shadow({ color: "rgba(139,0,139,0.8)", blur: 20, }); // Initiate a triangle object var triangle = new fabric.Triangle({ left: 120, top: 70, width: 90, height: 80, fill: "#228b22", stroke: "#d8e4bc", strokeWidth: 7, shadow: shadow, }); // Add it to the canvas canvas.add(triangle); </script> </body> </html>
以上是如何使用 FabricJS 為三角形添加陰影?的詳細內容。更多資訊請關注PHP中文網其他相關文章!