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




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

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