本教程包含以下内容(原创作品转载请注明出处)
- 大部分canvas基础API用法示例，内部工作原理探索
- 部分bug以及hack方法，如怎样绘制1px粗细的线条
- 部分API对应的数学变换公式推导，如scale/translate/rotate/transform与矩阵的相互推导
- 绘制虚线/箭头/圆角矩形/虚线圆/虚线圆角矩形/椭圆等图形
- 常见的碰撞检测、像素检测方法演示/实现细节/适用场景
- 如何实现物体堆叠顺序的变换，类似css中的z-index
- 2d动画中的精灵动画实现原理解析
- 如何计算多边形重心
目录
chapter 01: ctx.save/ctx.restore
chapter 02: ctx.fill*
chapter 03: ctx.drawImage*
chapter 04: ctx.fillRect/strokeRect/clearRect
chapter 05: ctx.arc
chapter 06: ctx.beginPath/closePath
chapter 07: 实例1:lineTo绘制围棋棋盘
chapter 08: 实例2:lineTo绘制菊花
chapter 09: quadraticCurveTo/bezierCurveTo二次/三次贝塞尔曲线
chapter 10: ctx.createLinearGradient线性渐变
chapter 11: ctx.createRadialGradient径向渐变
chapter 12: ctx.translate/ctx.scale/ctx.rotate 位移/缩放/旋转
chapter 13: ctx.transform 矩阵变换
chapter 14: ctx.globalCompositeOperation图形组合
chapter 15: ctx.shadowOffsetX/shadowOffsetY/shadowColor/shadowBlur阴影
chapter 16: ctx.createPattern(image, type) 图像平铺
chapter 17: ctx.clip() 画布裁剪
chapter 18: ctx.getImageData/putImageData/createImageData 像素操作
chapter 19: canvas事件
chapter 20: canvas像素碰撞检测
chapter 21: canvas 小游戏
chapter 22: canvas 小游戏改进版（添加sprite及优化缩放）
chapter 23: canvas碰撞检测（光线投射法）
chapter 24: 图片翻转
chapter 25: 像素级别碰撞检测
chapter 26: 求解多边形重心
chapter 27: 实现探照灯
chapter 28: 绘制圆角矩形/虚线/箭头
chapter 29: 绘制虚线圆角矩形/虚线圆(弧)/虚线箭头
chapter 30: 绘制椭圆/虚线椭圆(弧)
chapter 31: 高级loading动画