HTML5 Canvas实现刮刮乐

设置canvas 背景图/设置canvas 遮罩(为图片)

<canvas width="270" height="80" id="CanvasCtx">你的浏览器版本太低</canvas>

Jquery 返回的为jquery对象 而jQuery对象是没有getContext方法的，需要把jQuery对象转换成Dom对象

var canvas = $('#CanvasCtx')
var ctx = canvas[0].getContext('2d') // jquery 对象获取不到getContext()方法 需要添加[0]索引值
var canDraw = false // 判断鼠标是否按下的状态
var showPrize = true // 添加鼠标移动时只用一次接口
canvas[0].style.backgroundImage = 'prizeBackground.png'
canvas[0].style.backgroundSize = '100% 100%'
function Reset() { // 当用户有两次以上的刮奖次数时，重置canvas遮罩
        showPrize = false
        var src = "Background.png";//设置遮罩图片
        var img = new Image();
        img.src=src;
        img.onload = function() {//图片加载完成后渲染
            ctx.drawImage(img, 0, 0, 270, 80);
            ctx.font = '17px Arial'
            ctx.fillStyle = '#000000'
            ctx.fillText('刮开此图层', 95, 45) // 设置遮罩的文字
        }
    }
canvas.on('touchstart', function (e) {
        canDraw = true
        $('body').css('overflow', 'hidden') // 刮奖时设置当前屏幕不可滚动
        drawCircle(e)
    })
canvas.on('touchmove', function (e) {
    $('body').css('overflow', 'hidden')// 刮奖时设置当前屏幕不可滚动
    if (canDraw && showPrize) {
        drawCircle(e)
    }
 })
canvas.on('touchend', function (e) {
    $('body').css('overflow', 'visible') // 刮奖时设置当前屏幕可滚动
    canDraw = false
})
function drawCircle(e) {
        e.preventDefault();// 阻止浏览器默认事件
        var canvX=e.originalEvent.changedTouches[0].pageX - canvas[0].offsetLeft;//手指到canvas元素左边的距离
        var canvY=e.originalEvent.changedTouches[0].pageY - canvas[0].offsetTop;//手指到canvas元素上边的距离
        lottery(canvX,canvY,ctx);
        getFilledPercentage(e)
    }
function lottery(x,y,c){//清除以(x,y)为中心的四周边长20px的正方形的遮罩，c时canvas对象
    c.clearRect(x-10,y-10,20,20);
}
function getFilledPercentage(e) {
        e.preventDefault();// 阻止浏览器默认事件，重要
        var data = ctx.getImageData(0, 0, 270, 80).data,//获取整个canvas的元素点
            scrapeNum = 0,area = 270 * 80;
            for(var i = 3, len = data.length; i < len; i += 4){
                if(data[i] === 0){
                    scrapeNum ++;
                }
        }
        if (scrapeNum > area * 0.5) {//达到一定比例后清除所有
            ctx.clearRect(0, 0, 270, 80)
            luckdrawBtnBind() // 接口函数
            return true
        } else {
            return false
        }
}
function luckdrawBtnBind() {
    showPrize = false
}