# 作业：探索 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 -->