原生canvas制作刮刮乐效果

商城网站很多时候会有类似刮刮乐的功能,网上看到的实现方式是通过两个canvas实现.
总觉得比较low.于是自己封装了一个纯canvas底层实现刮刮乐模型
当然功能没有封装的很全,比方说加个背景图/奖品为图片等等..
当然这些功能都可以很简单的修改源码去实现了.
下面提供一下制作思路
在canvas绘制顺序应该是:
绘制背景图片(这一步我没有做)
->绘制蒙版
->destination-out模式绘制擦除蒙版的线段
->destination-over模式绘制奖品内容

照例给个demo地址:
刮刮乐demo
效果:

调用代码:

/**
     * 刮刮卡
     * @param {Object} opt
     * el: canvas id
     * text: 显示文字
     * textColor: 文字颜色 默认 #000
     * maskColor: 蒙版颜色 默认 #000
     * lineWidth: 擦除线条宽度 默认 20
     * fontStyle: 文字样式 默认 30px Georgia
     * callback: 用户第一次擦除回调(奖品在第一次擦除的时候获取.)
     * method
     *     setValue: 奖品赋值
     */
    var mask = maskShape({
        el: 'canvas',
        text: null,
        maskColor: "#ccc",
        textColor: '#000',
        lineWidth: 20,
        fontStyle: '30px Georgia',
        callback: function() { //第一次擦除回调函数. this指向对象本身
            //return 如果奖品是第一次擦除时加载进来,在callback中写ajax取值
            //如果超过200毫秒延迟体验会比较差,可以预先做一个生产队列
            var self = this;
            setTimeout(function() {
                var arr = ['一等奖', '二等奖', '三等奖', '谢谢惠顾'];
                var z = Math.floor(Math.random() * arr.length);
                self.setText(arr[z]);
            }, 200);
        }
    });

    //修改刮刮卡中值.
    //mask.setText('aaaa');