JavaScript 中的倒三角
在 JavaScript 中，倒三角是一種常用的圖形，在頁面中運用廣泛。倒三角可以是單色、漸變、動態或者靜態的。舉幾個例子：在一些用戶界面的設計中，我們經常會看到用倒三角來區分不同的選項，也可以用倒三角來表示某個元素被選中。在一些報表或者數據可視化的場景中，倒三角也可以作為餅圖或者柱狀圖的圖標，來進行數據展示。
使用 CSS 和 HTML 繪制倒三角雖然十分簡單，但是我們也可以使用 JavaScript 和 Canvas 來繪制更加復雜的倒三角。
繪制一個簡單的倒三角
下面是使用 JavaScript 和 Canvas 繪制簡單的倒三角的代碼：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const x = canvas.width / 2
const y = canvas.height / 2
ctx.beginPath()
ctx.moveTo(x - 50, y + 50)
ctx.lineTo(x + 50, y + 50)
ctx.lineTo(x, y - 50)
ctx.closePath()
ctx.fillStyle = 'red'
ctx.fill()

上面的代碼會在一個 canvas 元素中繪制一個紅色的倒三角。我們使用了 beginPath() 來開始一條新的路徑，并且使用 moveTo() 來將畫筆移動到倒三角的左下角，然后再使用 lineTo() 來繪制三角的線條。最后，我們使用了 fillStyle 來設置填充顏色，并且使用 fill() 將三角填充為紅色。我們還可以使用 stroke() 來繪制三角的線框。
繪制一個漸變的倒三角
下面是使用 JavaScript 和 Canvas 繪制一個漸變的倒三角的代碼：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const x = canvas.width / 2
const y = canvas.height / 2
const gradient = ctx.createLinearGradient(x - 50, y + 50, x + 50, y + 50)
gradient.addColorStop(0, '#e74c3c')
gradient.addColorStop(1, '#3498db')
ctx.beginPath()
ctx.moveTo(x - 50, y + 50)
ctx.lineTo(x + 50, y + 50)
ctx.lineTo(x, y - 50)
ctx.closePath()
ctx.fillStyle = gradient
ctx.fill()

上面的代碼會在一個 canvas 元素中繪制一個從紅色到藍色漸變的倒三角。我們使用了 createLinearGradient() 來創建一個漸變對象，并且使用 addColorStop() 來設置漸變的顏色停止點。漸變對象的前兩個參數是漸變的起始點和結束點。你也可以使用 createRadialGradient() 來創建一個徑向漸變。
繪制一個動態的倒三角
下面是使用 JavaScript 和 Canvas 繪制一個動態的倒三角的代碼：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
canvas.addEventListener('mousemove', (event) => {
const x = event.clientX
const y = event.clientY
const gradient = ctx.createLinearGradient(x - 50, y + 50, x + 50, y + 50)
gradient.addColorStop(0, '#e74c3c')
gradient.addColorStop(1, '#3498db')
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath()
ctx.moveTo(x - 50, y + 50)
ctx.lineTo(x + 50, y + 50)
ctx.lineTo(x, y - 50)
ctx.closePath()
ctx.fillStyle = gradient
ctx.fill()
})

上面的代碼會在一個 canvas 元素中繪制一個可以隨鼠標移動的倒三角。我們在 canvas 元素的 mousemove 事件中獲取鼠標的坐標，并且使用這個坐標來重新繪制倒三角。每次重新繪制前我們都會使用 clearRect() 來清空畫布。這樣就可以讓倒三角動態地跟隨鼠標移動了。
總結
使用 JavaScript 和 Canvas 繪制倒三角可以幫助我們實現豐富多彩的頁面效果。我們可以繪制簡單的倒三角、漸變的倒三角、動態的倒三角，還可以通過繪制更多的形狀和圖案，來讓頁面變得更加有趣和生動。