刮刮卡刮奖效果

//代码框架

<div class="content-box">
    <div id="demo1" class="scratchpad"></div>
    <div id="demo1-percent">&nbsp;</div>
    <script type="text/javascript">
                $('#demo1').wScratchPad({
                      size:25, //笔刷大小
                      fg: './images/canvas-image.png',//图片背景
                      bg: './images/openprize.png',//中奖图片
                     // realtime    : true,
                     'cursor': 'crosshair',//刮奖橡皮图片
                     scratchDown: function(e, percent){ 
                            $(this.canvas).css('margin-right', $(this.canvas).css('margin-right') == "0px" ? "1px" : "0px");
                      },
                     scratchMove: function(e, percent){
                            $(this.canvas).css('margin-right', $(this.canvas).css('margin-right') == "0px" ? "1px" : "0px");  
                            if (percent > 5) {
                                   this.clear();
                                   $('#infor-btn').addClass("infor-select");
                                   setTimeout("xxx()",1000)
                                 //  $('#demo1-percent').html("<img src='images/area-open.png' />");
                                  // $('#demo1-percent').css("background",'url(images/area.png) no-repeat scroll')
                                            } 
                      },
                scratchUp: function(e, percent){ 
                      $(this.canvas).css('margin-right', $(this.canvas).css('margin-right') == "0px" ? "1px" : "0px"); 
                }
        });
        function xxx(){
                $('#demo1-percent').html("<img src='images/area-open.png' />");
        }

  </script> 
  </div>

.scratchpad {
height: 178px;
position: absolute;
right: 6px;
top: 110px;
width: 294px;
}

/*插件框架*/

/*! wScratchPad - v2.1.0 - 2014-04-14 */
 ! 
function(a) {
    "use strict";
    function b(b, c) {
        this.$el = a(b),
        this.options = c,
        this.init = !1,
        this.enabled = !0,
        this._generate()
    }
    b.prototype = {
        _generate: function() {
            return a.support.canvas ? (this.canvas = document.createElement("canvas"), this.ctx = this.canvas.getContext("2d"), "static" === this.$el.css("position") && this.$el.css("position", "relative"), this.$img = a('<img src=""/>').attr("crossOrigin", "").css({
                position: "absolute",
                 "100%",
                height: "100%"
            }), this.$scratchpad = a(this.canvas).css({
                position: "absolute",
                 "100%",
                height: "100%"
            }), this.$scratchpad.bindMobileEvents(), this.$scratchpad.mousedown(a.proxy(function(b) {
                return this.enabled ? (this.canvasOffset = a(this.canvas).offset(), this.scratch = !0, void this._scratchFunc(b, "Down")) : !0
            },
            this)).mousemove(a.proxy(function(a) {
                this.scratch && this._scratchFunc(a, "Move")
            },
            this)).mouseup(a.proxy(function(a) {
                this.scratch && (this.scratch = !1, this._scratchFunc(a, "Up"))
            },
            this)), this._setOptions(), this.$el.append(this.$img).append(this.$scratchpad), this.init = !0, void this.reset()) : (this.$el.append("Canvas is not supported in this browser."), !0)
        },
        reset: function() {
            var b = this,
            c = Math.ceil(this.$el.innerWidth()),
            d = Math.ceil(this.$el.innerHeight()),
            e = window.devicePixelRatio || 1;
            this.pixels = c * d,
            this.$scratchpad.attr("width", c).attr("height", d),
            this.canvas.setAttribute("width", c * e),
            this.canvas.setAttribute("height", d * e),
            this.ctx.scale(e, e),
            this.pixels = c * e * d * e,
            this.$img.hide(),
            this.options.fg && ("#" === this.options.fg.charAt(0) ? (this.ctx.fillStyle = this.options.fg, this.ctx.beginPath(), this.ctx.rect(0, 0, c, d), this.ctx.fill(), this.$img.show()) : a(new Image).attr("src", this.options.fg).load(function() {
                b.ctx.drawImage(this, 0, 0, c, d),
                b.$img.show()
            })),
            //setTimeout(function(){
            this.options.bg && ("#" === this.options.bg.charAt(0) ? this.$el.css("backgroundColor", this.options.bg) : (this.$el.css("backgroundColor", ""), this.$img.attr("src", this.options.bg)))//中奖图片
            //}, 300)
        },
        clear: function() {
            this.ctx.clearRect(0, 0, Math.ceil(this.$el.innerWidth()), Math.ceil(this.$el.innerHeight()))
        },
        enable: function(a) {
            this.enabled = a === !0 ? !0: !1
        },
        destroy: function() {
            this.$el.children().remove(),
            a.removeData(this.$el, "wScratchPad")
        },
        _setOptions: function() {
            var a,
            b;
            for (a in this.options) this.options[a] = this.$el.attr("data-" + a) || this.options[a],
            b = "set" + a.charAt(0).toUpperCase() + a.substring(1),
            this[b] && this[b](this.options[a])
        },
        setBg: function() {
            this.init && this.reset()
        },
        setFg: function() {
            this.setBg()
        },
        setCursor: function(a) {
            this.$el.css("cursor", a)
        },
        _scratchFunc: function(a, b) {
            a.pageX = Math.floor(a.pageX - this.canvasOffset.left),
            a.pageY = Math.floor(a.pageY - this.canvasOffset.top),
            this["_scratch" + b](a),
            (this.options.realtime || "Up" === b) && this.options["scratch" + b] && this.options["scratch" + b].apply(this, [a, this._scratchPercent()])
        },
        _scratchPercent: function() {
            for (var a = 0, b = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height), c = 0, d = b.data.length; d > c; c += 4) 0 === b.data[c] && 0 === b.data[c + 1] && 0 === b.data[c + 2] && 0 === b.data[c + 3] && a++;
            return a / this.pixels * 100
        },
        _scratchDown: function(a) {
            this.ctx.globalCompositeOperation = "destination-out",
            this.ctx.lineJoin = "round",
            this.ctx.lineCap = "round",
            this.ctx.strokeStyle = this.options.color,
            this.ctx.lineWidth = this.options.size,
            this.ctx.beginPath(),
            this.ctx.arc(a.pageX, a.pageY, this.options.size / 2, 0, 2 * Math.PI, !0),
            this.ctx.closePath(),
            this.ctx.fill(),
            this.ctx.beginPath(),
            this.ctx.moveTo(a.pageX, a.pageY)
        },
        _scratchMove: function(a) {
            this.ctx.lineTo(a.pageX, a.pageY),
            this.ctx.stroke()
        },
        _scratchUp: function() {
            this.ctx.closePath()
        }
    },
    a.support.canvas = document.createElement("canvas").getContext,
    a.fn.wScratchPad = function(c, d) {
        function e() {
            var d = a.data(this, "wScratchPad");
            return d || (d = new b(this, a.extend(!0, {},
            c)), a.data(this, "wScratchPad", d)),
            d
        }
        if ("string" == typeof c) {
            var f,
            g = [],
            h = (void 0 !== d ? "set": "get") + c.charAt(0).toUpperCase() + c.substring(1),
            i = function() {
                f.options[c] && (f.options[c] = d),
                f[h] && f[h].apply(f, [d])
            },
            j = function() {
                return f[h] ? f[h].apply(f, [d]) : f.options[c] ? f.options[c] : void 0
            },
            k = function() {
                f = a.data(this, "wScratchPad"),
                f && (f[c] ? f[c].apply(f, [d]) : void 0 !== d ? i() : g.push(j()))
            };
            return this.each(k),
            g.length ? 1 === g.length ? g[0] : g: this
        }
        return c = a.extend({},
        a.fn.wScratchPad.defaults, c),
        this.each(e)
    },
    a.fn.wScratchPad.defaults = {
        size: 5,
        bg: "#cacaca",
        fg: "#6699ff",
        realtime: !0,
        scratchDown: null,
        scratchUp: null,
        scratchMove: null,
        cursor: "crosshair"
    },
    a.fn.bindMobileEvents = function() {
        a(this).on("touchstart touchmove touchend touchcancel", 
        function(a) {
            var b = a.changedTouches || a.originalEvent.targetTouches,
            c = b[0],
            d = "";
            switch (a.type) {
            case "touchstart":
                d = "mousedown";
                break;
            case "touchmove":
                d = "mousemove",
                a.preventDefault();
                break;
            case "touchend":
                d = "mouseup";
                break;
            default:
                return
            }
            var e = document.createEvent("MouseEvent");
            e.initMouseEvent(d, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null),
            c.target.dispatchEvent(e)
        })
    }
} (jQuery);

刮刮卡效果插件及用法~