資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 FabricJS 設定三角形的透明度？
<p>在本教程中，我們將學習如何使用 FabricJS 設定三角形的透明度。三角形是 FabricJS 提供的各種形狀之一。為了建立一個三角形，我們將必須建立一個<em>fabric.Triangle</em>類的例項並將其新增到畫布中。我們可以透過新增填充顏色、消除邊框甚至更改尺寸來自定義三角形物件。類似地，我們也可以使用<em>opacity</em>屬性更改其透明度。</p><h2>語法</h2><pre class="just-code notranslate language-javascript" data-lang="javascript">new fabric.Triangle({ opacity: Number }: Object)</pre><h2>引數</h2><ul class="list"><li><p><strong>選項</strong><strong> (可選)</strong> − 此引數是一個<em>Object</em>，它為我們的三角形提供了額外的自定義選項。使用此引數可以更改物件的許多屬性，例如顏色、游標、邊框寬度等等，其中<em>opacity</em>也是一個屬性。</p></li></ul><h2>選項鍵</h2><ul class="list"><li><p><strong>opacity</strong><strong> </strong>− 此屬性接受一個<strong>Number</strong>作為值，允許我們控制物件的透明度。opacity 屬性的預設值為 1。</p></li></ul><h2>示例 1</h2><p><strong>三角形物件的預設外觀</strong></p><p>讓我們來看一個程式碼示例，看看我們的三角形物件在<em>opacity</em>屬性的預設值下是什麼樣子。我們將不會向類傳遞任何 opacity 鍵，如下例所示：−</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html> <html> <head> <!-- 新增 Fabric JS 庫 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>三角形物件的預設外觀</h2> <p>注意，三角形是完全不透明的。</p> <canvas id="canvas"></canvas> <script> // 初始化畫布例項 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化三角形物件 var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, }); // 將其新增到畫布 canvas.add(triangle); </script> </body> </html></pre><h2>示例 2</h2><p><strong>將<em>opacity</em>屬性作為鍵傳遞</strong></p><p>在這個例子中，我們將看到如何為<em>opacity</em>屬性賦值來改變畫布中三角形物件的透明度。這裡我們使用了 0.3 作為透明度，因此使我們的三角形物件看起來是半透明的，而不是完全不透明的。</p><pre class="demo-code notranslate language-javascript" data-lang="javascript"><!DOCTYPE html> <html> <head> <!-- 新增 Fabric JS 庫 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>將 opacity 屬性作為鍵傳遞</h2> <p>您可以看到我們的三角形不是完全不透明的</p> <canvas id="canvas"></canvas> <script> // 初始化畫布例項 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化三角形物件 var triangle = new fabric.Triangle({ left: 105, top: 70, width: 90, height: 80, fill: "#746cc0", stroke: "#967bb6", strokeWidth: 5, opacity: 0.3, }); // 將其新增到畫布 canvas.add(triangle); </script> </body> </html></pre>
85 次瀏覽
