canvas知识体系

体系概览

把Canvas想象成一个画板

1. 一个绘制状态，可类比画图工具中的工具栏
2. 绘图元素，包括简单的图形，线条，复杂的组合，和图片
3. 绘制模式，比如画板中的图形存在绘制的先后顺序，而存在重叠部分，该如何显示存在重叠的图形，这是绘制模式要解决的问题
4. 裁切路径，只让画板的部分可见
5. 像素操作，操作ImageData的像素，画板的一部分
6. 区域访问，鼠标事件能够获取到所在的区域

绘制元素

需要说明的是image的类型

1. HTMLImageElement
2. HTMLVideoElement
3. HTMLCanvasElement
4. ImageBitmap

绘制状态

需说明的是，一个canvas只有一组绘制状态

区域访问

addHitRegion({id:'abc'}) 鼠标事件能够获取到所在的区域

绘制模式

globalCompositeOperation 比如画板中的图形存在绘制的先后顺序，而存在重叠部分，该如何显示存在重叠的图形，这是绘制模式要解决的问题

裁剪路径

clip() 只让画板的部分可见

像素操作