sroxck

// 獲取Canvas元素和繪圖上下文 
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')

// 定義圓心和半徑
const centerX = canvas.width / 2 // 中心X坐標
const centerY = canvas.height / 2 // 中心Y坐標
const outerRadius = 200 // 外圈半徑
const innerRadius = 100 // 內圈半徑

// 扇形數量
const outerNumSlices = 12 // 外圈扇形數量
const innerNumSlices = 4 // 內圈扇形數量

// 計算每個扇形的角度（弧度）
const outerSliceAngle = (2 * Math.PI) / outerNumSlices
const innerSliceAngle = (2 * Math.PI) / innerNumSlices

// 繪製扇形 需要參數是 菜單數量 單個菜單的弧度 圓的半徑  文本
function draw(num, angle, radius, labels) {
  // 循環菜單的數量
  for (let i = 0; i < num; i++) {
    const startAngle = i * angle  //開始的角度
    const endAngle = (i + 1) * angle // 结束的角度

    // 設置不同的填充顏色（可選）
    ctx.fillStyle = `hsl(${(i * 360) / num}, 100%, 50%)`

    // 繪製扇形
    ctx.beginPath()
    ctx.moveTo(centerX, centerY) // 移動到圓心
    ctx.arc(centerX, centerY, radius, startAngle, endAngle) // 繪製弧形
    ctx.closePath()
    ctx.fill() // 填充扇形

    // 可選：繪製扇形的邊框
    ctx.lineWidth = 2 // 設置邊框寬度
    ctx.strokeStyle = '#000000' // 設置邊框顏色
    ctx.stroke() // 繪製邊框

    // 計算文本位置
    const midAngle = (startAngle + endAngle) / 2
    const textX = centerX + (radius / 1.4) * Math.cos(midAngle)
    const textY = centerY + (radius / 1.2) * Math.sin(midAngle)

    // 繪製文本
    ctx.fillStyle = '#000000'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(labels[i], textX, textY)
  }
}

const outerLabels = Array.from({ length: outerNumSlices }, (_, i) => `Outer ${i + 1}`)
const innerLabels = Array.from({ length: innerNumSlices }, (_, i) => `Inner ${i + 1}`)

draw(outerNumSlices, outerSliceAngle, outerRadius, outerLabels)
draw(innerNumSlices, innerSliceAngle, innerRadius, innerLabels)