# 作業：探索 Canvas API

## 學習目標

完成此作業後，您將展示對 Canvas API 基礎的理解，並運用創意思維來使用 JavaScript 和 HTML5 canvas 建立視覺元素。

## 指示

選擇您感興趣的 Canvas API 其中一個面向，並圍繞它創作一個具吸引力的視覺專案。本作業鼓勵您在實驗學過的繪圖功能時，創造獨一無二的作品。

### 專案靈感建議

**幾何圖案：**
- **創建** 一個使用隨機定位的閃爍動態星空
- **設計** 使用重複幾何形狀的有趣紋理
- **製作** 旋轉且多彩的萬花筒效果

**互動元素：**
- **開發** 回應滑鼠移動的繪圖工具
- **實作** 點擊時會變色的圖形
- **設計** 帶移動元素的簡單動畫循環

**遊戲相關圖形：**
- **打造** 太空遊戲的捲動背景
- **製作** 爆炸或魔法咒語等粒子特效
- **創造** 多幀動畫精靈

### 開發指南

**研究和靈感：**
- **瀏覽** CodePen 以獲取創意 canvas 範例（用於靈感，不是複製）
- **研讀** [Canvas API 文件](https://developer.mozilla.org/docs/Web/API/Canvas_API) 以了解更多方法
- **嘗試** 不同繪圖函數、顏色及動畫效果

**技術需求：**
- **使用** 正確的 canvas 設置，如 `getContext('2d')`
- **包含** 有意義的註解說明您的方法
- **徹底測試** 代碼以確保無錯誤執行
- **應用** 現代 JavaScript 語法（const/let，箭頭函數）

**創意表達：**
- **專注** 深入探索一個 Canvas API 功能
- **加入** 您的創意巧思，使專案獨特
- **思考** 您的作品如何成為較大型應用程式的一部分

### 提交指南

請提交包含嵌入式 CSS 及 JavaScript 的單一 HTML 檔案，或放在一個資料夾中的多個檔案。附上一段簡短註解說明您的創作選擇及所探索的 Canvas API 功能。

## 評分標準

| 項目 | 優秀 | 充足 | 需要改進 |
|----------|-----------|----------|-------------------|
| **技術實作** | 創意運用多項 Canvas API 功能，程式碼運行無誤，採用現代 JavaScript 語法 | 正確使用 Canvas API，程式碼運行有少許問題，基本實作 | 嘗試使用 Canvas API，但代碼錯誤或無法執行 |
| **創意與設計** | 概念高度原創，視覺效果精緻，顯示深入探索所選 Canvas 功能 | 良好運用 Canvas 功能，具部分創意元素，視覺表現扎實 | 基本實作，創意及視覺吸引力有限 |
| **程式碼品質** | 代碼組織良好，有註解，遵從最佳實踐，演算法有效率 | 程式碼整潔，稍有註解，遵循基本編碼標準 | 代碼缺乏組織，註解很少，實作效率低 |

## 反思問題

完成專案後，請思考以下問題：

1. **您選擇了哪個 Canvas API 功能？為什麼？**
2. **製作過程中遇到了哪些挑戰？**
3. **您如何將此專案擴展成更大型的應用程式或遊戲？**
4. **您接下來想探索哪些其他 Canvas API 功能？**

> 💡 **專家秘訣**：從簡單開始，逐漸增加複雜度。一個執行良好的簡單專案，比一個過於龐大卻無法正常運作的專案更好！

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：
本文件由 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資料，建議採用專業人工翻譯。本公司對因使用本翻譯而引起的任何誤解或誤釋概不負責。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->