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 文件 以了解更多方法
- 嘗試 不同繪圖函數、顏色及動畫效果
技術需求：
- 使用 正確的 canvas 設置，如
getContext('2d') - 包含 有意義的註解說明您的方法
- 徹底測試 代碼以確保無錯誤執行
- 應用 現代 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 進行翻譯。雖然我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資料，建議採用專業人工翻譯。本公司對因使用本翻譯而引起的任何誤解或誤釋概不負責。