最简单的刮卡效果js代码

最简单的挂卡效果js代码，使用canvas实现的就几行代码，原理是用两张图叠加擦除实现。

const cvs = document.getElementById('cvs')
    const ctx = cvs.getContext('2d')
    const url = 'images/zj-bg.jpeg'
    const img = new Image()
    img.src = url
    img.onload = () => {
        ctx.drawImage(img, 0, 0, cvs.width, cvs.height)
    }
    let isClearing = false
    cvs.addEventListener('mousedown', e => {
        isClearing = true
    })
    cvs.addEventListener('mousemove', e => {
        if (isClearing) {
            const clearSize = 20
            ctx.clearRect(e.pageX - clearSize, e.pageY - clearSize, 
                clearSize, clearSize)
        }
    })
    document.addEventListener('mouseup', e => {
        isClearing = false
    })