html5-canvas刮刮卡实例-圆形刮痕

知识点

1、globalCompositeOperation属性，该属性表示的是图形的组合方式

2、使用到的是destination-out，它表示只绘制原图形与新图形不重叠的部分；原图形与新图形重叠的部分变透明。

3、对此时对touchmove方法中的代码再做修改，添加closePath方法。

4、画圆的arc方法

5、Math.PI*2

实现圆形刮痕的canvas刮刮卡视频教程，请点此链接：

https://v.qq.com/iframe/player.html?vid=d0166qkp08w&width=670&height=502.5&auto=0

附：html5-canvas 最简单的刮刮卡实例

本例重点：

getContext：返回一个用于在画布上绘图的环境。

clearRect：清空给定矩形内的指定像素。

实例视频请点此链接：

https://v.qq.com/iframe/player.html?vid=i0165619pju&width=670&height=502.5&auto=0