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

    c1.addEventListener("mousemove",eventMove,false);   
    c1.addEventListener("mousedown",eventDown,false);   
    c1.addEventListener("mouseup",eventUp,false);   
    //移动端的处理   
    c1.addEventListener(‘touchstart’, eventDown,false);   
    c1.addEventListener(‘touchend’, eventUp,false);   
    c1.addEventListener(‘touchmove’, eventMove,false);   
    //初始化   
    initCanvas();   
 }  

第三、画灰色的矩形铺满

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

function initCanvas(){//网上的做法是给canvas设置一张背景图片，我这里的做法是直接在canvas下面另外放了个div   
     //c1.style.backgroundImage="url(中奖图片.jpg)";   
     ctx.globalCompositeOperation = "source-over";   
     ctx.fillStyle = ‘#aaaaaa’;   
     ctx.fillRect(0,0,c1.clientWidth,c1.clientHeight);   
     ctx.fill();   
     ctx.font = "Bold 30px Arial";   
                 ctx.textAlign = "center";   
                 ctx.fillStyle = "#999999";   
                 ctx.fillText("刮一刮",c1.width/2,50);//把这个属性设为这个就可以做出圆形橡皮擦的效果   
     //有些老的手机自带浏览器不支持destination-out,下面的代码中有修复的方法   
     ctx.globalCompositeOperation = ‘destination-out’;}  

第四、鼠标按下 和 触摸开始

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

function eventDown(e){   
    e.preventDefault();   
    ismousedown=true;}  

第五、鼠标抬起 和 触摸结束

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

function eventUp(e){   
    e.preventDefault();   
    //得到canvas的全部数据