深入理解 HTML Canvas

目录

1. 1 深入理解 HTML Canvas

2. 2 基础绘图

• 概述
• Canvas 是什么？
• 在 Web 中还剩哪部分工作适合 Canvas 做？
• Which？ What？ When？
• 浏览器支持
• 简易绘制
• 路径
• 坐标系统
• 图像
• 文本
• 渐变

3. 3 动手：制作图表

• 创建新页面
• 添加数据
• 轴线与标签
• 饼图
• 添加渐变

4. 4 高级绘制及事件

• 图像填充
• 透明度
• 变形
• 状态保存
• 裁切
• 事件

5. 5 动画

• 使用 requestAnimationFrame 制作动画
• 清除背景
• 粒子模拟器
• 精灵图动画

6. 6 制作游戏

• 使用精灵图绘制太空船
• 子弹及炸弹精灵图动画
• 外星人程序图形
• 爆炸粒子系统

7. 7 像素缓冲及效果

• 生成纹理
• 添加噪音
• 图像反色
• 灰度
• 混合模式
• 阴影效果

8. 8 实例与工具

• 图表
• 游戏引擎
• 绘图程序
• 自定义字体
• 工具与类库
• 可视化工具

9. 9 移动设备与性能优化

• Draw Less

10. 10 WebGL、ThreeJS的3D绘图

• 概述
• 例子
• 浏览器支持
• ThreeJS 模板
• 自定义模板
• 着色器效果
• 更多细节

11. 11 使用 ThreeJS 动手制作 WebGL: 3D Car

• 创建天空
• 制作地平面
• 添加车模型
• 键盘控制
• 下一步

12. 12 WebAudio 网页音频

• 概述
• Audio元素 vs WebAudio
• 简单重放
• WebAudio 节点
• 声音效果
• Audio 可视化
• 绘制频率
• 下一步

13. 13 使用 getUserMedia() 获取摄像头

• 获取用户媒体getUserMedia
• 获取快照
• 更多酷应用

14. 14 下一步