作者：汪娇娇
日期：2016.12.8
在现在这个公司呆了4个多月，也是研究了canvas将近4个月，前两周心里就痒痒的想写这方面的博客，但一直没时间。可一直拖着也不是个办法，就这样抽抽空来写吧。
canvas的常用方法我就不介绍了，主要是给大家展示几个常用的canvas案例，也是自己做过的一些小东西，希望能对大家有帮助吧。
案例一：小画板
这个应该是canvas最常用的案例之一了：小画板，也就是鼠标画画。PC端和手机端皆有兼容：
成果图：
代码如下：
小提醒：为了兼容手机端，记得加上viewport：
1、html代码：
2、css代码：
3、js代码：
注：我是提前引入jQuery的：
案例二：画的回放
方法：结合getImageData()和putImageData()
原理：通过 getImageData() 复制画布上的像素数据，然后通过 putImageData() 将图像数据放回画布。
getImageData()格式：
ImageData下面的data就是构成画布上的像素数据。
效果图如下：
以下代码仅以PC端为例：
1、html代码：
2、css代码：
3、js代码：
这是其中一个办法，还有一个办法就是通过存储坐标点，然后用定时器回放坐标点。方法类似，大家可以自己研究研究。
案例三：刮刮乐（）
原理：ctx.globalCompositeOperation = "destination-out";
在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
效果图：
1、html代码：
2、css代码：
3、js代码：
思考：刮刮乐的方法可以延伸到彩色画笔，大家自己思考一下哈，如下图：
canvas暂时就到这儿了，有问题可以在下面回复或私聊哈。