通过Canvas实现的可刮涂层效果.
修改img.src时涂层也会自动适应新图片的尺寸.
修改layer函数可更改涂层样式.
涂层:
可刮效果:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>F5</title> <style> html,body{margin:0;padding:0;height:100%;width:100%;-webkit-overflow-touch:none;} </style> </head> <body> <script> ;(function(){ var isTouch = 'ontouchstart' in window, events = { start : isTouch ? 'touchstart' : 'mousedown', move : isTouch ? 'touchmove' : 'mousemove', end : isTouch ? 'touchend' : 'mouseup' }; var ScratchCard = function (params) { if( !(this instanceof ScratchCard) ) { return new ScratchCard(params); }; this._init(params); }; ScratchCard.prototype = { constructor : ScratchCard , _init : function (params) { var _this = this, ret = _this._createCanvas(params); _this.canvas = ret.canvas; _this.ctx = ret.ctx; _this.pos = _this._getPos(_this.canvas); _this.canvas.style.backgroundImage = 'url(' + params.url + ')'; _this.canvas.style.backgroundRepeat = 'no-repeat'; _this.canvas.style.backgroundSize = "100% 100%"; //圆的半径 _this.radius = params.radius || 10; //区域宽高 _this.width = params.width; _this.height = params.height; //事件监听 _this._listen(); }, _createCanvas : function (params) { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.width = params.width; canvas.height = params.height; params.dom.appendChild(canvas); if(params.type == 'image'){ var img = new Image(); img.src = params.src; img.onload = function () { ctx.drawImage(img,0,0, document.documentElement.clientWidth, document.documentElement.clientHeight); } }else if(params.type == 'color'){ ctx.fillStyle = params.color; ctx.fillRect(0,0,params.width,params.height); } return { canvas : canvas, ctx : ctx } }, _listen : function () { var _this = this; _this.enableMove = false; _this.canvas.addEventListener(events.start,function(e){ _this._start(e); },false); _this.canvas.addEventListener(events.move,function(e){ _this._move(e); },false); document.body.addEventListener(events.end,function(e){ _this._end(e); },false); }, _start : function (e) { var _this = this,x,y; _this.enableMove = true; e = isTouch ? e.touches[0] : e; x = e.pageX; y = e.pageY; _this._clear(x,y); }, _move : function (e) { var _this = this,x,y; e.preventDefault(); e = isTouch ? e.touches[0] : e; x = e.pageX; y = e.pageY; if(_this.enableMove){ _this._clear(x,y); } }, _end : function (e) { var _this = this; _this.enableMove = false; _this.ctx.closePath(); var data = _this.ctx.getImageData(0,0,_this.width,_this.height).data; for(var i=0,j=0;i<data.length;i+=4){ if(data[i] && data[i+1] && data[i+2] && data[i+3]){ j++; } } if(j<=_this.width*_this.height*0.4){ _this.ctx.clearRect(0, 0, _this.width, _this.height); _this._href('http://www.baidu.com'); } }, _finish : function () { alert('over'); }, _clear : function (x,y) { var _this = this, ctx = _this.ctx; x = x - _this.pos.left; y = y - _this.pos.top; ctx.fillStyle = '#0f0'; ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x,y,_this.radius,0,Math.PI*2,false); ctx.fill(); }, _getPos : function (obj) { var _this= this; return obj.offsetParent ? (function(){ var ret = _this._getPos(obj.offsetParent); return { left : obj.offsetLeft + ret.left, top : obj.offsetTop + ret.top } })() : { left : obj.offsetLeft, top : obj.offsetTop }; }, _href : function(href, waitTime){ var timeHref = null; var waitTime = waitTime || 3000; clearTimeout(timeHref); timeHref = setTimeout(function(){ window.location.href = href; }, waitTime); } }; window.ScratchCard = ScratchCard; })(); /* 参数 dom dom节点 width 宽度 height 高度 radius 涂改大小 type 类型/图片或者颜色 src 图片——————遮罩 color 颜色——————遮罩 url 刮出来的图片 */ //自定义图片 ScratchCard({ dom : document.body, width : document.documentElement.clientWidth, height : document.documentElement.clientHeight, radius : 20, type : 'image', src : '1.jpg', url: '2.jpg' }); //自定义颜色 ScratchCard({ dom : document.body, width : document.documentElement.clientWidth, height : 450, radius : 40, type : 'color', color : '#ddd', url: 'http://h.hiphotos.baidu.com/image/w%3D1366%3Bcrop%3D0%2C0%2C1366%2C768/sign=3a6cd8ad123853438ccf8322a5258b1d/63d0f703918fa0ec07bc4fcc249759ee3c6ddbf3.jpg' }); </script> </body> </html>