在本教程中，我們將學習如何使用FabricJS在三角形的x軸上設定傾斜角度。三角形是FabricJS提供的各種形狀之一。為了建立一個三角形，我們將需要建立一個fabric.Triangle類別的實例並將其新增至畫布上。
我們可以透過改變其尺寸、添加背景顏色或改變x軸上的傾斜角度來自訂我們的三角形物件。我們可以使用skewX屬性來實現這一點。
new fabric.Triangle({ skewX: Number }: Objectscript">new fabric.Triangle({ skewX: Number }: Object )選項 (可選) − 此參數是一個物件，它提供了對我們的三角形進行額外自訂的選項。使用此參數，可以變更與skewX屬性相關的物件的顏色、遊標、描邊寬度和許多其他屬性。
skewX< /strong> − 此屬性接受一個數字值，確定物件在x軸上的傾斜角度。
當未應用skewX屬性時
<當未應用skewX屬性時< ;p>讓我們看一個程式碼範例，了解當未應用skewX屬性時我們的三角形物件的外觀。在這種情況下，我們的三角形物件不會有任何角度的傾斜。<!DOCTYPE html>
<html> 的中文翻譯為：<html>
<head>的中文翻譯為：<頭部>
<!-- 新增Fabric JS函式庫 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>的中文翻譯為：</head>
<body>的中文翻譯為：<body>
<h2>當未應用skewX屬性時</h2>
<p>預設情況下，您可以看到三角形沒有任何角度的傾斜</p>
<canvas id="canvas"></canvas>
<script> 的中文翻譯為： <script>
// 初始化一個畫布實例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化一個三角形對象
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
高度：80,
fill: "#b7410e"，
stroke: "#f5deb3",
（註：這是一段HTML程式碼，其中 表示空格）
strokeWidth: 7,
});
// 將其加入到畫布中
canvas.add(triangle);
</script>
</body> 的中文翻譯為：</body>
</html>將skewX作為鍵並為其指派自訂值。
在這個範例中，我們將看到如何為skewX屬性分配一個數值。傳遞的值將決定沿著X軸的傾斜程度。
<!DOCTYPE html>
<html> 的中文翻譯為：<html>
<head>的中文翻譯為：<頭部>
<!-- 新增Fabric JS函式庫 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>的中文翻譯為：</head>
<body>的中文翻譯為：<body>
<h2>Passing skewX as key and assigning it a custom value</h2>
<p>You can see the triangle has skewed on x-axis at a 50 degree angle</p>
<canvas id="canvas"></canvas>
<script> 的中文翻譯為： <script>
// 初始化一個畫布實例
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// 初始化一個三角形對象
var triangle = new fabric.Triangle({
left: 120,
top: 70,
width: 90,
高度：80,
fill: "#b7410e"，
stroke: "#f5deb3",
（註：這是一段HTML程式碼，其中 表示空格）
strokeWidth: 7,
skewX: 50,
});
// 將其加入到畫布中
canvas.add(triangle);
</script>
</body> 的中文翻譯為：</body>
</html>