网站制作学习网JS脚本→正文:刮刮卡代码,javascript刮刮卡,canvas刮刮卡
字体:

刮刮卡代码,javascript刮刮卡,canvas刮刮卡

JS脚本 2015/5/5 11:11:59  点击:不统计

http://%77w%77%2E%66%6F%72%61%73%70%2E%63n网站制作学习
 刮刮卡刮奖代码基于javascript制作,兼容PC端和手机移动端,使用非常简单,将图片的id传递过去即可。

在线展示案例  刮刮卡

<script>
cover("11");/*这里传递图片id即可,会自动获取图片位置并cover*/
function cover(id){
var img  = document.getElementById(id);
if(!img)return;
/*获取图片对象完毕,开始获取设置刮刮卡位置,并创建canvas覆盖刮刮卡图片*/
var left = img.offsetLeft,top  = img.offsetTop,h =  img.height,w = img.width;
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);
document.body.appendChild(canvas);
/*canvas刮刮卡覆盖对象创建完成并追加到body,下面开始设置覆盖层的属性*/
var drawarea = document.getElementById("forasp");
var touchRadius = 15; 
var ball_pen = drawarea.getContext("2d");
ball_pen.fillStyle = "#ccc";
ball_pen.fillRect(0, 0, w, h);
/*定义刮奖的时候清理 刮奖区域图层*/
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';//设置刮奖移动事件
/*绑定刮刮卡 点击和移动刮奖的事件,阻止元素发生默认的行为   原文章%77w%77%2Ef%6F%72%61%73%70%2E%63n*/
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>

http://%77%77%77%2E%66%6F%72%61%73%70%2E%63%6E

·上一篇:javascript继承 >>    ·下一篇:图片刮刮卡,图片覆盖刮刮卡代码 >>
推荐文章
最新文章