Canvas實現旋轉太極八卦圖

項目簡介

這是一個使用HTML5 Canvas技術實現的動態太極八卦圖，包含了旋轉動畫和鼠標交互功能。項目展示了中國傳統文化元素與現代Web技術的結合。

主要特點

1. 動態旋轉的太極圖
2. 八卦符號的完整展示
3. 鼠標懸停暫停動畫
4. 流暢的動畫效果

技術實現

1. 基礎結構

<canvas id="baguaCanvas" width="400" height="400"></canvas>

畫布樣式設置：

canvas {display: block;margin: 100px auto;box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);border-radius: 50%;
}

2. 太極圖繪制

太極圖的繪制分為四個主要步驟：

1. 繪制圓形背景和裁剪區域
2. 繪制黑白兩半
3. 繪制上下兩個大圓
4. 添加陰陽眼

3. 八卦符號布局

八卦符號包含：

• 乾（天）：純陽
• 兌（澤）：上二陽下一陰
• 離（火）：中陽上下陰
• 震（雷）：下陽上二陰
• 巽（風）：上二陽下陰
• 坎（水）：中陰上下陽
• 艮（山）：上陽下二陰
• 坤（地）：純陰

每個卦象由三部分組成：

• 卦名
• 屬性
• 爻線（陽爻為實線，陰爻為斷線）

4. 動畫實現

使用requestAnimationFrame實現旋轉動畫：

function optimizedAnimate() {if (isAnimating) {rotation += 0.02;drawBagua();}requestAnimationFrame(optimizedAnimate);
}

5. 交互控制

通過鼠標事件控制動畫：

canvas.addEventListener('mouseenter', () => isAnimating = false);
canvas.addEventListener('mouseleave', () => isAnimating = true);

性能優化

1. 使用ctx.save()和ctx.restore()管理繪圖狀態
2. 通過clip()實現圓形裁剪
3. 優化動畫循環，避免不必要的重繪
4. 使用標志位控制動畫狀態

使用說明

1. 直接在瀏覽器中打開HTML文件
2. 太極圖會自動開始旋轉
3. 鼠標移入可暫停動畫
4. 鼠標移出繼續動畫

擴展建議

1. 添加旋轉速度控制
2. 實現點擊卦象顯示詳細解釋
3. 添加背景音效
4. 優化移動端適配
5. 增加更多交互效果

技術要點

1. Canvas 2D繪圖
2. JavaScript動畫實現
3. 事件處理
4. 性能優化
5. 數學計算（坐標、旋轉）