7.JS | 移动端“刮刮卡式”蒙层画板 Canvas

“canvas绝对不分男女老少幼的，神秘莫测只是它选择了装逼。canvas更是一门艺术，一种审美的逼格。所以一直以来web开发语言都在找方法要将canvas重新包装起来，使得深井的民众，对于canvas能有更深一层的了解。”
——题记，改变源自《少林足球》

正文

今天，我们就来讲讲“艺术”，这词瞬间逼格上升导致不大适应，还是降个档，不过也跟艺术有那么点关联，说说移动端的web画板实现吧。先上效果图：

字样效果.png

有没有看出啥名堂？从上面的画板，我们可以直观而又直接的看到上、下两部分，上为画板框，下为工具栏。画板框：底图是自选的蔚蓝大海之图，蒙层是略带透明度的黑色之层，划开图层写字。工具栏：拥有撤销，清除，选择笔触大小的功能。那这种又是“刮刮卡”又可写字的画板怎么实现呢？下面且听概说。

首当其冲，当然是思考技术关键点辣——蒙层写文字咋实现，现有方式，canvas绝对是最佳之选。

可知道canvas有个合成属性globalCompositeOperation，这个有意思了，利用destination-out可实现底图覆盖图层之效，“大头”属性。另外，这里也列了部分的canvas的属性方法（懂得略过），设置的链接皆是中文版w3cschool，不过建议结合看英文版w3cschool或者W3C，中文的翻译嘛有时候会有一丢丢“小拗口”：

canva部分方法属性

1. fillStyle //设置画板的填充颜色

2. fillRect() //填充画板颜色
3. lineWidth //设置画笔大小
4. beginPath() //开始一条路径
5. moveTo() //设置路径起始点，不创建线条
6. lineTo() //设置该条路径终点，并创建直线线条
7. getImageData() //返回ImageData对象，图像状态的数据
8. putImageData() //把图像数据(指定的ImageData对象)放到画布上
9. globalCompositeOperation //图像合成状态属性
10. save() //保存canvas绘制状态
11. getContext() //创建画布环境

画板简单流程

创建canvas(width与height必须) → 创建画布环境(getContext) → 绘制蒙层矩形合成(globalCompositeOperation)，设置画笔，初始化数据 → touchstart，touchmove，touchend事件(画路径，存入数组save，便于撤销) → 基本完成画板；
撤销事件：读取数组数据，putImageData；
清除事件：设置画板为原始状态，也可选择用canvas的clearReact方法清除，逻辑会稍有些变化；
部分代码如下：

draw.png

清除画板.png

历史数据.png

代码在 github链接(戳此进)上能看到，可下载使用，使用方法如下：

var painter = new Painter({
    layer: 'mask',  //蒙层的id名称
    cancelButton: 'btn-cancel', //取消按钮的id名称（必选）
    clearButton: 'btn-clear',   //清楚画板的按钮名称（必选）
    lineWidth: 10,              //笔触的宽度（可选），默认为5
    layerBg: "rgba(0, 0, 0, 0.8)",  //蒙层的颜色（可选），默认为"rgba(255, 255, 255, 0.8)"
    shadowBlur: 10, //笔触阴影（可选），默认值0
    cvaWidth: 800,  //canvas的宽度，默认值600
    cvaHeight: 500  //canvas的高度，默认值400
});

下载引用文件，css可布局自己的样式，js实例化对象，填参数，看效果，代码仅供参考，不吝赐教，共促方是大促吼~

result.png