You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.6 KiB
3.6 KiB
作業：探索 Canvas API
學習目標
完成此作業後，您將能展現對 Canvas API 基礎的理解，並運用創意解決問題，利用 JavaScript 和 HTML5 canvas 建構視覺元素。
指示
選擇 Canvas API 中您感興趣的一個面向，並圍繞它創建一個引人入勝的視覺專案。本作業鼓勵您在學習了繪圖功能後進行實驗，同時打造獨特的作品。
啟發靈感的專案點子
幾何圖案：
- 創造 一個使用隨機位置的動畫閃爍星星銀河
- 設計 利用重複幾何形狀的有趣紋理
- 構建 帶有旋轉彩色圖案的萬花筒效果
互動元素：
- 開發 一個響應滑鼠移動的繪圖工具
- 實作 被點擊時會改變顏色的形狀
- 設計 一個帶有移動元素的簡單動畫循環
遊戲相關圖像：
- 製作 太空遊戲的捲動背景
- 建構 爆炸或魔法咒語的粒子效果
- 創建 多幀動畫精靈圖像
開發指南
研究與靈感來源：
- 瀏覽 CodePen 的創意 canvas 範例（用於靈感，不是複製）
- 研究 Canvas API 文件 了解更多方法
- 嘗試 不同繪圖函數、顏色及動畫效果
技術要求：
- 使用 以
getContext('2d')正確設定 canvas - 加入 有意義的註解說明您的實作方式
- 徹底測試 代碼確保無錯誤執行
- 採用 現代 JavaScript 語法（const/let，箭頭函式）
創意表現：
- 專注 一個 Canvas API 功能，深入探索
- 新增 您的創意巧思，讓專案更具個人特色
- 思考 作品如何成為更大型應用程式的一部分
提交指南
請提交一個包含嵌入式 CSS 和 JavaScript 的單一 HTML 檔案，或放在資料夾中的分開檔案。包含一段簡短註解，說明您的創意選擇以及探索的 Canvas API 功能。
評分標準
| 評分標準 | 優異 | 足夠 | 需改進 |
|---|---|---|---|
| 技術實作 | 創意使用多項 Canvas API 功能，程式碼完美執行，使用現代 JavaScript 語法 | Canvas API 使用正確，程式執行有小問題，基本實作 | 嘗試使用 Canvas API，但程式有錯誤或無法執行 |
| 創意與設計 | 高度原創的概念，視覺呈現精緻，深入探索選定 Canvas 功能 | 良好利用 Canvas 功能，帶有部分創意元素，視覺效果穩健 | 基本實作，創意與視覺吸引力有限 |
| 程式碼品質 | 程式碼結構良好且有註解，遵循最佳實踐，演算法效率佳 | 程式碼乾淨且有些許註解，遵循基本編碼標準 | 程式碼組織不佳，註解少，執行效率低 |
反思問題
完成專案後，請思考以下問題：
- 您選擇了哪個 Canvas API 功能？為什麼？
- 在建構專案過程中遇到了哪些挑戰？
- 您如何將此專案擴展為更大型的應用程式或遊戲？
- 接下來想探索哪些 Canvas API 的其他功能？
💡 專家提示：從簡單開始，逐步增加複雜度。執行良好的簡單專案，勝過過度雄心卻無法正常運作的專案！
免責聲明：
本文件係使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們力求準確，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件之母語版本應視為權威來源。對於重要資訊，建議聘請專業人工翻譯。我們不對因使用本翻譯而產生之任何誤解或錯誤詮釋負責。