canvas实现涂鸦效果--大小颜色背景图

利用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现更换笔触大小颜色和换背景图功能，最终效果如下图。Tips：本文是在《canvas实现涂鸦效果--基本涂鸦效果》基础上添加功能，基础功能可参考上面文章（修改了一处地方drawLine(ctx, lastCoordinate.x, lastCoordinate.y, curCoordinate.x, curCoordinate.y, curLineWidth, strokeColor);）。

2、添加阻止拖动函数，详细代码如下图；因为H5在手机滑动页面时候，页面会被拖动，导致跟手指涂鸦冲突，体验不好，所以需要增加该函数，阻止页面被拖动。

4、实现可更换笔触颜色和大小的功能，详细代码如下图： 查看代码可看出滑动过程中会调用函数drawLine，且函数有参数curLineWidth（笔触大小）和strokeColor（笔触颜色），所以只需要选择颜色和大小的时候，替换这两个参数的值就可以实现功能，选择对应的值就是（sizeWidth（用于计算）和strokeColor）； 为了便于用户知道选择了什么颜色和那个大小，也实现了选择回填； 最后实现了点击后关闭弹出框显示操作栏。