“canvas绝对不分男女老少幼的，神秘莫测只是它选择了装逼。canvas更是一门艺术，一种审美的逼格。所以一直以来web开发语言都在找方法要将canvas重新包装起来，使得深井的民众，对于canvas能有更深一层的了解。”
——题记，改变源自《少林足球》
正文
今天，我们就来讲讲“艺术”，这词瞬间逼格上升导致不大适应，还是降个档，不过也跟艺术有那么点关联，说说移动端的web画板实现吧。先上效果图：
简书字样效果.png
有没有看出啥名堂？从上面的画板，我们可以直观而又直接的看到上、下两部分，上为画板框，下为工具栏。画板框：底图是自选的蔚蓝大海之图，蒙层是略带透明度的黑色之层，划开图层写字。工具栏：拥有撤销，清除，选择笔触大小的功能。那这种又是“刮刮卡”又可写字的画板怎么实现呢？下面且听概说。
首当其冲，当然是思考技术关键点辣——蒙层写文字咋实现，现有方式，canvas绝对是最佳之选。
可知道canvas有个合成属性globalCompositeOperation，这个有意思了，利用destination-out可实现底图覆盖图层之效，“大头”属性。另外，这里也列了部分的canvas的属性方法（懂得略过），设置的链接皆是中文版w3cschool，不过建议结合看英文版w3cschool或者W3C，中文的翻译嘛有时候会有一丢丢“小拗口”：
canva部分方法属性
- fillStyle //设置画板的填充颜色
- fillRect() //填充画板颜色
- lineWidth //设置画笔大小
- beginPath() //开始一条路径
- moveTo() //设置路径起始点，不创建线条
- lineTo() //设置该条路径终点，并创建直线线条
- getImageData() //返回ImageData对象，图像状态的数据
- putImageData() //把图像数据(指定的ImageData对象)放到画布上
- globalCompositeOperation //图像合成状态属性
- save() //保存canvas绘制状态
- 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
网友评论