通过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%;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>