Html5实现移动端、PC端 刮刮卡效果

    var a = ctx.getImageData(0,0,c1.width,c1.height);   
    var j=0;   
    for(var i=3;i<a.data.length;i+=4){   
        if(a.data[i]==0)j++;   
    }   
    //当被刮开的区域等于一半时，则可以开始处理结果   
    if(j>=a.data.length/8){   
        isOk = 1;   
    }   
    ismousedown=false;   
 }  

第六、鼠标移动 和 触摸移动

XML/HTML Code复制内容到剪贴板

//鼠标移动 和 触摸移动   
function eventMove(e){   
    e.preventDefault();   
    if(ismousedown) {   
        if(e.changedTouches){   
            ee=e.changedTouches[e.changedTouches.length-1];   
        }   
        var topY = document.getElementById("top").offsetTop;   
        var oX = c1.offsetLeft,   
        oY = c1.offsetTop+topY;   
        var x = (e.clientX + document.body.scrollLeft || e.pageX) – oX || 0,   
        y = (e.clientY + document.body.scrollTop || e.pageY) – oY || 0;   
        //画360度的弧线，就是一个圆，因为设置了ctx.globalCompositeOperation = ‘destination-out’;   
        //画出来是透明的   
        ctx.beginPath();   
        ctx.arc(x, y, fontem*1.2, 0, Math.PI * 2,true);   
        //下面3行代码是为了修复部分手机浏览器不支持destination-out   
        //我也不是很清楚这样做的原理是什么   
        c1.style.display = ‘none’;   
        c1.offsetHeight;