AxeSlide软件项目梳理 canvas绘图系列知识点整理
多个canvas画布
从下面的截图我们可以看到有5个canvasDOM元素，id分别为canvas，ghostCanvas，HitCanvas，gridCanvas和animation_canvas，这里我们先介绍前4个canvas的作用。从源码里可以看到这几个canvas的大小都是一样的。如果利用《软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵》中介绍的getTeansform方法获取画布矩阵的6个值也是一样的。
canvas 主画布
正常状态下绘制所有元素在canvas主画布上面，包括移动旋转缩放画布时，及主循环一直在循环时也是在不断把所有元素绘制到canvas上。
如下图所示有文字元素，图片元素，图形元素等，都是绘制到canvas上
ghostCanvas 编辑状态
当点击选中某个元素，对该元素进行编辑时（编辑主要指大小，角度，位置坐标及其他属性如颜色等），因为主要改变的是一个或几个元素所以将其绘制到ghostCanvas上面，未选中编辑的其他元素仍在主画布canvas上维持原状。
如下图箭头图被选中，那么这张图片是绘制到了ghostCanvas上面。
gridCanvas 网格线
绘制如下图中的一条条网格线，其中有大格子和小格子。后面有具体讲解网格线的画法《软件项目技术点(5)——在canvas上绘制动态网格线》
hitCanvas 元素影子
我们通过改变hitCanvas标签的样式将其显示出来，可以看到它上面绘制的是一个一个矩形块。并且每个矩形块的颜色都是不一样的，为什么不一样呢？后面看到《软件项目技术点(4)——实现点击画布上元素》就明白这里的巧妙了
