首页

PHP

PHOTOSHOP

FLASH

JS脚本

网站优化

ASP

经验与学习

DIV+CSS

Linux

Python

Database

网站制作学习网→JS脚本→正文：图片刮刮卡,图片覆盖刮刮卡代码

字体：大 中 小

 

今天分享的是图片刮刮卡代码 覆盖层是一个图片。

查看案例

代码如下 

<div id="foraspcn"><img src="http://www.forasp.cn/up_img/2015-5/1319302462392.jpg"></div>

上面加载图片是为了当覆盖的时候浏览器已经有了该图片。否则覆盖会是个黑块。

<script>

setTimeout(function(){

cover("foraspcn");

},1000);/*这里传递DIV id即可,会自动获取图片位置并cover,这里设置1秒是为了加载完毕，可以用onload代替*/

function cover(appendbodyid){

var back_img_url = "http://www.forasp.cn/up_img/2015-5/1319295780172.jpg";//这里是中奖图片

var cover_img_url = "http://www.forasp.cn/up_img/2015-5/1319302462392.jpg";//这里是覆盖图片必须全路径

var obj = document.getElementById(appendbodyid);

var left = obj.offsetLeft,top  = obj.offsetTop,h =  obj.offsetHeight,w = obj.offsetWidth;

var cover_img = new Image();

cover_img.src = cover_img_url;

/*获取图片对象完毕,开始获取设置刮刮卡位置，并创建canvas覆盖刮刮卡图片*/

var canvas = document.createElement("canvas");

canvas.style.top = top+"px";

canvas.style.left = left+"px";

canvas.style.position = "absolute";

canvas.innerHTML = '您的浏览器不支持canvas！';

canvas.setAttribute("id","forasp");

canvas.setAttribute("height",h);

canvas.setAttribute("width",w);

canvas.style.background = "url('"+back_img_url+"')";

canvas.style.backgroundRepeat="no-repeat";

canvas.style.backgroundSize = 'cover';

obj.appendChild(canvas);

/*canvas刮刮卡覆盖对象创建完成并追加到body,下面开始设置覆盖层的属性*/

var drawarea = document.getElementById("forasp");

var touchRadius = 15; 

var ball_pen = drawarea.getContext("2d");

ball_pen.clearRect(0, 0, w, h);

ball_pen.rect(0, 0, w, h);

var pat = ball_pen.createPattern(cover_img, "no-repeat");

ball_pen.fillStyle = pat;

ball_pen.fill();

/*定义刮奖的时候清理 图层*/

var fillCircle = function (x, y, radius, fillColor) {

this.fillStyle = fillColor || "#eee";

this.beginPath();

this.moveTo(x, y);

this.arc(x, y, radius, 0, Math.PI * 2, false);

this.fill();

};

/*canvas刮刮卡代码判断是否是移动端,并通过不同的事件进行处理*/

var ismobile = /mobile/i.test(navigator.userAgent.toLowerCase());//判断是否是移动端

var startEvent = ismobile ? 'touchstart' : 'mousedown';//设置刮刮卡点击事件

var clearEvent = ismobile ? 'touchmove' : 'mousemove';//设置刮奖移动事件

/*绑定刮刮卡 点击和移动刮奖的事件，阻止元素发生默认的行为*/

if (!ismobile) {

var isMouseDown = false;

document.addEventListener('mouseup', function (e) {

isMouseDown = false;

}, false);

} else {

document.addEventListener("touchmove", function (e) {

if (isMouseDown) {

e.preventDefault();

}

}, false);

document.addEventListener('touchend', function (e) {

isMouseDown = false;

}, false);

};

drawarea.addEventListener(startEvent, function (e) {

isMouseDown = true;

var x = (ismobile ? e.touches[0].clientX : e.clientX) - left;

var y = (ismobile ? e.touches[0].clientY : e.clientY) - top;

ball_pen.globalCompositeOperation = 'destination-out'; 

fillCircle.call(ball_pen, x, y, touchRadius);

}, false);

drawarea.addEventListener(clearEvent, function (e) {

if (!ismobile && !isMouseDown) {

return false;

}

var x = (ismobile ? e.touches[0].clientX : e.clientX) - left;

var y = (ismobile ? e.touches[0].clientY : e.clientY) - top;

ball_pen.globalCompositeOperation = 'destination-out';

fillCircle.call(ball_pen, x, y, touchRadius);

}, false);

}

</script>