基於Canvas的刮刮卡刮獎小控件lucky-card



lucky-card是一個實現刮刮卡刮獎效果的js小控件，基於HTML5 Canvas，採用原生js編寫，不依賴任何類庫，支持AMD/CMD模塊化加載，支持iOS、Android和桌面瀏覽器（IE>=9）,Windows Phone未測。

先來掃個DEMO看看（或者點擊這裏）：

用法

HTML結構

<div id="scratch">
    <div id="card">￥5000000元</div>
</div>

在頁面中引入控件所需樣式表文件lucky-card.css

<link rel="stylesheet" href="../dist/lucky-card.css">

以上css文件只有控件所必需的樣式，刮刮卡樣式請根據需要自行編寫（可參考DEMO頁面）

引入lucky-card.js/lucky-card.min.js文件

<script src='../dist/lucky-card.js'></script>

在確保頁面相關DOM加載完畢(如寫在頁面底部，或document的DOMContentLoaded事件處理函數中)之後，初始化控件

LuckyCard.case();

可配置項與回調函數

初始化lucky-card控件時，支持傳入一個JSON對象和(或)一個回調函數，用於配置控件功能/設置回調函數

LuckyCard.case(settings,callback);

• 參數settings是一個JSON對象，可選，用於配置控件功能
• 參數callback是回調函數，可選，也可以寫在settings中

可配置項（settings）一覽

key	類型	默認值	描述
coverColor	string	"#C5C5C5"	刮開層的顏色，未設置coverImg時生效，支持十六進制和rgba寫法
coverImg	string	""	刮開層可以是一張圖片，在這裏設置圖片地址，一旦設置此項，coverColor將失效。（注意：圖片地址不支持跨域，如果跨域可以考慮將先其轉成Data URI）
ratio	number	0.8	觸發回調函數時刮開面積佔總面積的比例，超過這個比例回調就觸發。建議取值在0到1之間。
callback	function	null	回調函數，在刮開面積佔總面積的比例超過設定值時觸發，亦可作爲一個獨立的參數存在。回調函數內可以調用this.clearCover()方法清除掉刮開層的所有像素。

//基本用法
LuckyCard.case({coverColor:'#CCCCCC',ratio:.6,callback:function(){alert('中獎啦！')}});

//刮開層支持使用圖片，但圖片不能跨域，如果跨域可以考慮將先其轉成Data URI，再設置
LuckyCard.case({coverImg:'./demo.jpg'});

//callback可作爲一個獨立的參數存在
LuckyCard.case(function(){
    //清除掉刮開層的所有像素
    this.clearCover();
});