|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
|
|
"translation_date": "2025-10-22T22:53:37+00:00",
|
|
|
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
|
|
"language_code": "mo"
|
|
|
}
|
|
|
-->
|
|
|
# 作業：探索 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 功能？**
|
|
|
|
|
|
> 💡 **專業提示**：從簡單開始，逐步增加複雜性。一個執行良好的簡單項目比一個過於雄心勃勃但無法正常運行的項目更好！
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責聲明**：
|
|
|
此文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或誤釋不承擔責任。 |
