没什么好说的，就是一堆Bug，样式又极其丑 传送门

目前功能

1. 双图层：对上层图层橡皮擦等操作时不会影响下层图像，而且画笔功能能展示在下层图像上
2. 画笔：
   • 画笔有四种尺寸可供选择，分别是40px,30px,20px,10px；
   • 笔触为矩形；除此有五种颜色可供选择，分别是red,yellow,blue,green,black；
   • 笔刷目前的状态透明度更高，便于区分，所有的功能点如下图所示：

• 画笔功能示意图：

3. 橡皮擦：
   • 橡皮擦可擦掉画笔画的内容，而不能擦掉下层图像；
   • 橡皮擦有四种尺寸，同画笔尺寸

注：橡皮擦和画笔的状态有透明度的标识区分，便于区分目前状态

4. 上传图片： 用户可上传本地图片，对其操作，功能如图所示：

后期计划

1. 代码重构，最起码让人容易看，不能像现在这样一坨shi一样
2. 图片下载功能
3. 图片增加滤镜
4. 画布适应上传图片比例
5. css问题
6. 界面移动带来的画笔位置偏移问题
7. 笔刷粗细自定义
8. 标注功能
9. 图片下载的话右键就可以下载，但是由于是多个图层，所以目前的问题就是右键下载的是上层的图层，所以需要合并图层，所以目前打算是，先做滤镜，之后再考虑画布合并问题，因为都是像素问题
10. 图片大小不同导致画笔的分辨率不同

项目进度

• 11.22：

先提交个雏形

• 11.23:

修改颜色和画笔大小的Bug

修改画布的适应问题

• 11.24:

改掉偏移问题

收获

1. 事件流：事件冒泡和事件捕获，参考红宝书13.1节
2. 打开本地图片方法：将图片转码成base64
3. 多图层实现：position: absolute，然后不同层设置不同的z-index
4. 画布的宽高和CSS的宽高不一样，这里的比例变化还会引起画笔的位置比例和粗细比例
5. 理解e.clientX,e.clientY,e.pageX,e.pageY,e.offsetX,e.offsetY见博客