說明

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           // 刮擦完畢回調，參數（擦除面積百分比）
};