Canvas 动画开发完全手册
📘
30章 · 从入门到实战
01
Canvas基础入门
Canvas元素
坐标系
获取上下文
绘制矩形
02
绘制基本图形
矩形
圆形
直线
路径
贝塞尔曲线
03
颜色与样式
fillStyle
strokeStyle
globalAlpha
线性渐变
径向渐变
图案填充
04
文本绘制
fillText
strokeText
font
textAlign
textBaseline
measureText
05
图像处理
drawImage
缩放与裁剪
图像平铺
getImageData
putImageData
06
变换与状态
translate
rotate
scale
transform矩阵
save/restore
07
动画基础
requestAnimationFrame
帧率控制
循环结构
时间驱动
FPS监控
08
交互式动画
鼠标事件
鼠标位置
点击检测
拖拽交互
键盘控制
09
粒子系统
粒子类设计
生成与更新
生命周期
颜色与大小
交互效果
10
物理引擎基础
速度与加速度
重力模拟
摩擦力
弹性碰撞
边界检测
11
时钟动画
表盘绘制
时针
分针
秒针
实时更新
12
图表绘制
柱状图
折线图
饼图
坐标轴
数据标签
13
游戏开发基础
游戏循环
精灵类
矩形碰撞
圆形碰撞
键盘状态
14
动画缓动函数
线性缓动
二次缓动
三次缓动
弹性缓动
回弹缓动
15
路径与裁剪
beginPath/closePath
clip裁剪
非零环绕
奇偶环绕
复杂路径
16
阴影与发光
shadowColor
shadowBlur
shadowOffsetX/Y
发光效果
17
合成与混合模式
globalCompositeOperation
source-over
叠加与遮罩
应用场景
像素混合
18
Canvas性能优化
离屏渲染
分层Canvas
避免重绘
整数坐标
批量绘制
19
Canvas与CSS结合
背景设置
CSS动画对比
响应式Canvas
CSS过渡
CSS滤镜
20
Canvas与SVG对比
适用场景
性能对比
互操作
Canvas导出SVG
SVG导出Canvas
21
Canvas与WebGL基础
WebGL简介
Canvas与WebGL
WebGL上下文
绘制三角形
性能对比
22
Canvas与音频可视化
音频上下文
频谱分析
绘制频谱
绘制波形
交互可视化
23
Canvas与视频处理
视频元素
绘制视频帧
滤镜效果
帧提取
播放控制
24
Canvas与数据可视化
可视化原则
散点图
热力图
力导向图
树图
25
Canvas与地图
绘制地图基础
瓦片加载
缩放与平移
标记绘制
交互事件
26
Canvas与物理引擎
物理引擎库
刚体模拟
约束与关节
布料模拟
流体模拟
27
Canvas与游戏引擎
引擎架构
场景管理
资源加载
动画状态机
循环优化
28
Canvas与VR/AR
WebVR简介
Canvas+VR
Canvas+AR
3D场景
VR交互
29
Canvas与机器学习
TensorFlow.js
模型训练
图像识别
姿态估计
实时推理
30
综合项目实战
需求分析
架构设计
核心功能
性能优化
部署发布