html5canvas模板(html canvas api)

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

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

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

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

　　创建画布的方法：

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

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

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

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

　　创建一个300X200的canvas画布

　　java代码 :

　　鼠标操作事件：