如何实现刮刮卡效果刮刮卡是活动的常用形式，用户通过类似刮奖的方式进行抽奖。首先需要明白实现这样一个模块需要哪些步骤1.重

刮刮卡是活动的常用形式，用户通过类似刮奖的方式进行抽奖。

首先需要明白实现这样一个模块需要哪些步骤

1. 重置样式

2. 定义刮刮卡父级div

3. 定义刮刮卡默认设置宽高背景

4. 创建canvas 设置宽高背景 id

5. 获取画布

6. 设置画笔颜色

7. 画笔透明

8. 监听touch

9. 滑动的时候用画笔画

需要初始化全局的一些数据方便维护

    // 初始化选项
    let option = {      
        width: window.innerWidth,        // 刮刮卡的宽度      
        height: window.innerHeight / 2,  // 刮刮卡的高度      
        canvas: null,                    // 刮刮卡canvas元素挂载点      
        fatherNode: null,                // 刮刮卡父元素挂载点      
        count: 0,                        // 刮刮卡刮开的像素点      
        // 预加载的图      
        imgList: [        
            {          
                name: "bg",          // 一般是背景          
                url: ''        
            },        
            {          
                name: "cover",          
                // 一般是本地的同域名下的图          
                url: ""        
            }      
        ]    
    }

在你处理图片的时候需要处理这个图是否加载完了这一步非必要反正都是放在canvas底部的

// 预加载图
function preloadImg() {   
    return new Promise((resolve) => {     
        let list = option.imgList;     
        let count = 0;     
        list.forEach(e => {       
        let img = new Image();       
        img.src = e.url;       
        img.style.width = 0       
        img.style.height = 0       
        // 预加载图片要设block 否则会有默认占位       
        img.style.display = 'block';       
        img.onload = function () {         
            count++         
            if (count == option.imgList.length) {          
                resolve()        
            }       
        }      
        img.onerror = function () {        
        count++        
        if (count == option.imgList.length) {       
           resolve()       
        }      
    }       
    document.body.appendChild(img)     })
  }) 
}

接下来我们需要创建画布，做一些基础的设置画布的一些操作，并且正式把整个画布添加到页面中去

// 创建画布    
function createCanvas() {      
    // 创建父元素      
    option.fatherNode = document.createElement("div")      
    option.fatherNode.style.width = option.width || 300      
    option.fatherNode.style.height = option.height || 300      
    // 创建canvas      
    option.canvas = document.createElement("canvas")      
    option.canvas.setAttribute("id", "catCanvas")      
    option.canvas.width = option.width || 300      
    option.canvas.height = option.height || 300      
    // canvas底图      
    option.canvas.style.backgroundImage = 'url(' + option.imgList[0].url + ')';      
    option.canvas.style.backgroundSize = "100% 100%"      
    // option.canvas.style.backgroundColor = '#e9e9e9';      
    option.fatherNode.appendChild(option.canvas)      
    document.body.appendChild(option.fatherNode)    
}

处理一下刮刮卡蒙层的部分要银灰色的那种

 // 设置canvas画笔    
function setCanvas() {      
    if (option.canvas.getContext('2d')) {        
        let ctx = option.canvas.getContext('2d');        
        // canvas的drawImage会跨域 要么就base64        
        // 绘制蒙层 + 文案        
        ctx.fillStyle = '#bbb';        
        ctx.fillRect(0, 0, option.width, option.height);        
        ctx.font = "Bold 20px Arial";        
        ctx.textAlign = "center";        
        ctx.fillStyle = "#e9e9e9";        
        ctx.fillText("刮卡赢大奖 回家吃鸡", 
        option.width / 2, 
        option.height / 2);      
    }    
}

关键一步来了用户的画笔其实就是绘制的操作只不过给绘制成了透明色

// 画笔    
function setCanvasTranparent() {     
    if (option.canvas.getContext('2d')) {        
        let ctx = option.canvas.getContext('2d');        
        // 画笔透明        
        ctx.globalCompositeOperation = "destination-out";      
    }    
}

接下来就是监听用户手势操作了

// 监听用户操作    
function listenUserTouch() {      
    // 开始的标识 你可以处理登录 可以利用tag值处理touchmove      
    option.canvas.addEventListener("touchstart", () => {        
        console.log("touchstart")      
    })

    option.canvas.addEventListener("touchmove", (e) => {        
        var touch = e.touches[0];        
        let x = touch.pageX;        
        let y = touch.pageY;        
        var p = option.fatherNode.getBoundingClientRect();        
        var fatherLeft = p.left;        
        var fatherTop = p.top;        
        let ctx = option.canvas.getContext('2d')        
        ctx.beginPath();        
        ctx.arc(x - fatherLeft, y - fatherTop, 20, 0, Math.PI * 2, true);        
        ctx.fillStyle = "#000000";        
        ctx.fill();      
    })      
    option.canvas.addEventListener("touchend", (e) => {        
        let ctx = option.canvas.getContext('2d')        
        var imageDate = ctx.getImageData(0, 0, option.width, option.height);        
        var data = imageDate.data;        
        for (let i = 0; i < data.length; i += 4) {          
            if (data[i + 3] < 128) {            
                option.count = option.count + 3;         
            }        
        }        
        var percent = (option.count / data.length).toFixed(2) * 100;        
        if (percent > 30) {          
            console.log('刮开了');          
            ctx.fillStyle = "rgba(255, 255, 255)";          
            ctx.fillRect(0, 0, option.width, option.height);        
        }      
    })    
}

最后就是组装起来因为这些方法都是单独写的

function loadCanvas() {  
    createCanvas()  
    setCanvas()  
    setCanvasTranparent()
    listenUserTouch()
}
window.onload = function () {  
    preloadImg().then(() => {
       loadCanvas()  
    })
}