資源簡介
說明
canvas刮獎組件
使用
<div id="lotteryArea"></div>
new scratchLottery(ElementID, {
lottery : '一等獎\niPhone6 一部\n恭喜您獲獎',
mask : 'images/mask.png',
text : { //font : 'Arial', margin: [.2,.2]
}, //scratchType : 'point', openPct : 40, onscratch : function (percent) { console.log('已刮開:': percent '%');
}, onopen : function (percent) { console.log('刮開了 ': percent '%,移除遮罩');
}
});
默認參數說明
Options = { lottery : '謝謝參與\n分享到微博再來一次',// 必須,獎項背景,刮出后顯示的東西,可以是文字(支持換行)、圖片 mask : '#ccc', // 必須,遮罩層,可以是顏色值、圖片 width : 0, // 寬度,若為0,則匹配box寬度 height : 0, // 高度,若為0,則匹配box高度 lotteryCanvas : null, // 背景Canvas對象,為空則自動創建 lotteryType : null, // 背景選項(text|image),默認自動檢測lottery,可強制指定 text : { // 字體樣式,lotteryType為text啟用 bgColor : '#fff', // 背景色 font : 'Microsoft YaHei', // 字體 style : 'Bold', // 第一行文字樣式,(font-style|font-variant|font-weight) size : 0, // 第一行文字大小,為0則自動計算 color : '#f60', // 第一行文字顏色 styleOther : '', // 其他文字樣式 sizeOther : 0, // 其他文字大小,為0則自動計算 colorOther : '#666', // 其他文字顏色 margin :[.15,.1], // 區域四周留白,[上下,左右](單位%) space : 0, // 文字行間距,為0則自動計算 align : 'center' // 對齊方式(left|right|center) }, useImageSize : false, // 跟隨圖片大小,lotteryType為image啟用 maskCanvas : null, // 遮罩Canvas對象,為空則自動創建 maskType : null, // 遮罩選項(color|image),默認自動檢測mask,可強制指定 scratchType : 'line', // 刮擦類型,(line|point) scratchWidth : 0, // 刮擦畫筆寬度,為0則自動計算 openPct : 50, // 刮開百分比,回調onopen onscratch : null, // 刮擦回調,參數(擦除面積百分比) onopen : null // 刮擦完畢回調,參數(擦除面積百分比) };
代碼片段和文件信息
?屬性????????????大小?????日期????時間???名稱
-----------?---------??----------?-----??----
?????目錄???????????0??2015-11-02?08:31??scratchLottery-master\
?????文件???????????6??2015-11-02?08:31??scratchLottery-master\.gitignore
?????文件????????2606??2015-11-02?08:31??scratchLottery-master\README.md
?????目錄???????????0??2015-11-02?08:31??scratchLottery-master\images\
?????文件???????56146??2015-11-02?08:31??scratchLottery-master\images\mask.png
?????文件????????2625??2015-11-02?08:31??scratchLottery-master\index.html
?????目錄???????????0??2015-11-02?08:31??scratchLottery-master\js\
?????文件????????9881??2015-11-02?08:31??scratchLottery-master\js\scratchLottery.js
?????文件???????17137??2015-11-02?08:31??scratchLottery-master\js\scratchLottery.source.js
-----------?---------??----------?-----??----
?????目錄???????????0??2015-11-02?08:31??scratchLottery-master\
?????文件???????????6??2015-11-02?08:31??scratchLottery-master\.gitignore
?????文件????????2606??2015-11-02?08:31??scratchLottery-master\README.md
?????目錄???????????0??2015-11-02?08:31??scratchLottery-master\images\
?????文件???????56146??2015-11-02?08:31??scratchLottery-master\images\mask.png
?????文件????????2625??2015-11-02?08:31??scratchLottery-master\index.html
?????目錄???????????0??2015-11-02?08:31??scratchLottery-master\js\
?????文件????????9881??2015-11-02?08:31??scratchLottery-master\js\scratchLottery.js
?????文件???????17137??2015-11-02?08:31??scratchLottery-master\js\scratchLottery.source.js
- 上一篇:html5 轉盤抽獎 幸運數字
- 下一篇:html5搖一搖(帶聲音)
評論
共有 條評論