html5实现刮刮卡

来源：互联网发布：魔兽世界淘宝刷坐骑编辑：程序博客网时间：2024/05/06 18:31

使用canvas实现。

canvas下面有一个div，div中可以显示文字。

基于github中一个项目修改的。http://github.com/websanova/wScratchPad

html

<div id="gua1" class="guaguaka"></div><script type="text/javascript">$(function(){        $("#gua1").wScratchPad({            cursor:'',            image:'images/xx.jpg',    text:'123',            scratchMove: function(e, percent)            {                if(percent > 70)                this.clear();            },        });})</script>

css

.guaguaka{    display: inline-block;    position: relative;}

(function($){    $.fn.wScratchPad = function(option, settings)    {        if(typeof option === 'object')        {            settings = option;        }        else if(typeof option == 'string')        {            var values = [];            var elements = this.each(function()            {                var data = $(this).data('_wScratchPad');                if(data)                {                    if(option === 'reset') { data.reset(); }                    else if(option === 'clear') { data.clear(); }                    else if(option === 'enabled') { data.enabled = settings === true; }                    else if($.fn.wScratchPad.defaultSettings[option] !== undefined)                    {                        if(settings !== undefined) { data.settings[option] = settings; }                        else { values.push(data.settings[option]); }                    }                }            });            if(values.length === 1) { return values[0]; }            if(values.length > 0) { return values; }            else { return elements; }        }        settings = $.extend({}, $.fn.wScratchPad.defaultSettings, settings || {});        return this.each(function()        {            var elem = $(this);            var $settings = jQuery.extend(true, {}, settings);            //test for HTML5 canvas            var test = document.createElement('canvas');            if(!test.getContext)            {                elem.html("Browser does not support HTML5 canvas, please upgrade to a more modern browser.");                return false;            }            var sp = new ScratchPad($settings, elem);            elem.append($('<p></p>').css({                position:'absolute',                margin:'0',width:'100%',                height:'100%',                'text-align':'center',                'line-height':$settings.height+'px',                'font-size':$settings.height/2 + 'px'            }).html($settings.text));            elem.append(sp.generate());            //get number of pixels of canvas for percent calculations            sp.pixels = sp.canvas.width * sp.canvas.height;            elem.data('_wScratchPad', sp);            sp.init();        });    };    $.fn.wScratchPad.defaultSettings =    {        text            : 'none',        width: 483,// set width - best to match image width        height: 340,// set height - best to match image height        image: null,// set image path        image2: null,// set overlay image path - if set color is not used        color: '#888',// set scratch color - if image2 is not set uses color        overlay: 'none',// set the type of overlay effect 'none', 'lighter' - only used with color        size: 10,// set size of scratcher        realtimePercent : false,              // Update scratch percent only on the mouseup/touchend (for better performances on mobile device)        scratchDown: null,// scratchDown callback        scratchUp: null,// scratchUp callback        scratchMove: null,// scratcMove callback        cursor: null// Set path to custom cursor    };    function ScratchPad(settings, elem)    {        this.sp = null;        this.settings = settings;        this.$elem = elem;        this.enabled = true;        this.scratch = false;        this.canvas = null;        this.ctx = null;        return this;    }    ScratchPad.prototype =    {        generate: function()        {            var $this = this;            this.canvas = document.createElement('canvas');            this.ctx = this.canvas.getContext('2d');            this.sp =                $('<div></div>')                    .css({position: 'relative'})                    .append(                        $(this.canvas)                            .attr('width', this.settings.width + 'px')                            .attr('height', this.settings.height + 'px')                    )            $(this.canvas)                .mousedown(function(e)                {                    if(!$this.enabled) return true;                    e.preventDefault();                    e.stopPropagation();                    //reset canvas offset in case it has moved                    $this.canvas_offset = $($this.canvas).offset();                    $this.scratch = true;                    $this.scratchFunc(e, $this, 'Down');                })                .mousemove(function(e)                {                    e.preventDefault();                    e.stopPropagation();                    if($this.scratch) $this.scratchFunc(e, $this, 'Move');                })                .mouseup(function(e)                {                    e.preventDefault();                    e.stopPropagation();                    //make sure we are in draw mode otherwise this will fire on any mouse up.                    if($this.scratch)                    {                        $this.scratch = false;                        $this.scratchFunc(e, $this, 'Up');                    }                });            this.bindMobile(this.sp);            return this.sp;        },        bindMobile: function($el)        {            $el.bind('touchstart touchmove touchend touchcancel', function ()            {                var touches = event.changedTouches, first = touches[0], type = "";                switch (event.type)                {                    case "touchstart": type = "mousedown"; break;                    case "touchmove": type = "mousemove"; break;                    case "touchend": type = "mouseup"; break;                    default: return;                }                var simulatedEvent = document.createEvent("MouseEvent");                simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY, false, false, false, false, 0/*left*/, null);                first.target.dispatchEvent(simulatedEvent);                event.preventDefault();            });        },        init: function()        {            this.sp.css('width', this.settings.width);            this.sp.css('height', this.settings.height);            this.sp.css('cursor', (this.settings.cursor ? 'url("' + this.settings.cursor + '"), default' : 'default'));            $(this.canvas).css({cursor: (this.settings.cursor ? 'url("' + this.settings.cursor + '"), default' : 'default')});            this.canvas.width = this.settings.width;            this.canvas.height = this.settings.height;            this.pixels = this.canvas.width * this.canvas.height;            if(this.settings.image2)            {                this.drawImage(this.settings.image2);            }            else            {                if(this.settings.overlay != 'none')                {                    if(this.settings.image)                    {                        this.drawImage(this.settings.image);                    }                    this.ctx.globalCompositeOperation = this.settings.overlay;                }                else                {                    this.setBgImage();                }                this.ctx.fillStyle = this.settings.color;                this.ctx.beginPath();                this.ctx.rect(0, 0, this.settings.width, this.settings.height)                this.ctx.fill();            }        },        reset: function()        {            this.ctx.globalCompositeOperation = 'source-over';            this.init();        },        clear: function()        {            this.ctx.clearRect(0, 0, this.settings.width, this.settings.height);        },        setBgImage: function()        {            if(this.settings.image)            {                this.sp.css({backgroundImage: 'url('+this.settings.image+')'});            }        },        drawImage: function(imagePath)        {            var $this = this;            var img = new Image();            img.src = imagePath;            $(img).load(function(){                $this.ctx.drawImage(img, 0, 0);                $this.setBgImage();            })        },        scratchFunc: function(e, $this, event)        {            e.pageX = Math.floor(e.pageX - $this.canvas_offset.left);            e.pageY = Math.floor(e.pageY - $this.canvas_offset.top);            $this['scratch' + event](e, $this);            if(this.settings.realtimePercent || event == "Up") {                if($this.settings['scratch' + event]) $this.settings['scratch' + event].apply($this, [e, $this.scratchPercentage($this)]);            }        },        scratchPercentage: function($this)        {            var hits = 0;            var imageData = $this.ctx.getImageData(0,0,$this.canvas.width,$this.canvas.height)            for(var i=0, ii=imageData.data.length; i<ii; i=i+4)            {                if(imageData.data[i] == 0 && imageData.data[i+1] == 0 && imageData.data[i+2] == 0 && imageData.data[i+3] == 0) hits++;            }            return (hits / $this.pixels) * 100;        },        scratchDown: function(e, $this)        {            $this.ctx.globalCompositeOperation = 'destination-out';            $this.ctx.lineJoin = "round";            $this.ctx.lineCap = "round";            $this.ctx.strokeStyle = $this.settings.color;            $this.ctx.lineWidth = $this.settings.size;            //draw single dot in case of a click without a move            $this.ctx.beginPath();            $this.ctx.arc(e.pageX, e.pageY, $this.settings.size/2, 0, Math.PI*2, true);            $this.ctx.closePath();            $this.ctx.fill();            //start the path for a drag            $this.ctx.beginPath();            $this.ctx.moveTo(e.pageX, e.pageY);        },        scratchMove: function(e, $this)        {            $this.ctx.lineTo(e.pageX, e.pageY);            $this.ctx.stroke();        },        scratchUp: function(e, $this)        {            $this.ctx.closePath();        },    }})(jQuery);

0 0