# 作業：探索 Canvas API

## 學習目標

完成此作業後，您將能展現對 Canvas API 基礎的理解，並運用創意解決問題，利用 JavaScript 和 HTML5 canvas 建構視覺元素。

## 指示

選擇 Canvas API 中您感興趣的一個面向，並圍繞它創建一個引人入勝的視覺專案。本作業鼓勵您在學習了繪圖功能後進行實驗，同時打造獨特的作品。

### 啟發靈感的專案點子

**幾何圖案：**
- **創造** 一個使用隨機位置的動畫閃爍星星銀河
- **設計** 利用重複幾何形狀的有趣紋理
- **構建** 帶有旋轉彩色圖案的萬花筒效果

**互動元素：**
- **開發** 一個響應滑鼠移動的繪圖工具
- **實作** 被點擊時會改變顏色的形狀
- **設計** 一個帶有移動元素的簡單動畫循環

**遊戲相關圖像：**
- **製作** 太空遊戲的捲動背景
- **建構** 爆炸或魔法咒語的粒子效果
- **創建** 多幀動畫精靈圖像

### 開發指南

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

**技術要求：**
- **使用** 以 `getContext('2d')` 正確設定 canvas
- **加入** 有意義的註解說明您的實作方式
- **徹底測試** 代碼確保無錯誤執行
- **採用** 現代 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 -->