HTML5的canvas画布实现刮刮卡原理

随着移动端网页的发展，一些新流行的特别效果也应运而生，比较火的刮刮乐效果经常用在一些支付完成后领取奖励的页面，今天就给大家分享一个基于HTML5技术实现的刮刮卡效果。

要用到HTML5的画布Canvas。什么是Canvas呢？先来给大家讲解下：

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

创建画布的方法：

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

你可以在HTML页面中使用多个 <canvas> 元素。可以给你设定的canvas添加各种样式！

知道画布的方法后，下面就来解决刮刮卡的效果：

创建一个300X200的canvas画布

javascript代码 :

鼠标操作事件：