canvas实现刮刮卡，vue3实现

效果图：

主要属性：globalCompositeOperation

代码：

<template>
    <div class="guaguaka" id="guauguaka" ref="guauguaka">
        <div class="awards">谢谢参与</div>
        <canvas id="canvas" ref="canvas" width="375" height="150"></canvas>
    </div>
</template>

<script>
export default {
    mounted() {
        let canvas = this.$refs.canvas
        let ggk = this.$refs.guauguaka
        let ctx = canvas.getContext("2d")
        ctx.fillStyle = '#999'
        ctx.fillRect(0,0,375,150)
        ctx.font = '30px 楷体'
        ctx.fillStyle = '#FFF'
        ctx.fillText('刮刮卡',150,75)
        var isDraw = false
        // 设置isDraw = true 意思是允许绘制
        canvas.onmousedown = () => {
            console.log('onMounseDown');
            isDraw = true
        }
        canvas.onmousemove = (e) => {
            if(isDraw) {
                console.log('onMounseMove',e);
                let x = e.pageX - ggk.offsetLeft
                let y = e.pageY - ggk.offsetTop
                ctx.globalCompositeOperation = 'destination-out'
                ctx.arc(x,y,20,0,2*Math.PI)
                ctx.fill()
            }
        }
        canvas.onmouseup = () => {
            console.log('onMounseUp');
            isDraw = false
        }
    }

}
</script>

<style lang="less" scoped>
.awards{
    width: 100%;
    height: 150px;
    border: 1px solid red;
    text-align: center;
    font-size: 30px;
    line-height: 150px;
}
.guaguaka{
    position: relative;
    #canvas{
        position: absolute;
        left: 0;
        top: 0;
    }
}
</style>

以下是vue3实现的部分，注意的是vue3中没有this，于是获取refs方法有所改变，参考【https://blog.csdn.net/weixin_43090018/article/details/120544804】

 代码部分：

<template>
    <div class="guaguaka" id="guauguaka" ref="guauguaka">
        <div class="awards">谢谢参与</div>
        <canvas id="canvas"
        @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="canvas" width="375" height="150"></canvas>
    </div>
    <!-- <van-button type="primary" @click="download">点击下载图片</van-button> -->
</template>

<script>
// refs的使用参考https://blog.csdn.net/weixin_43090018/article/details/120544804
import { onMounted, reactive, ref } from 'vue'
export default {
    setup() {
        const guauguaka = ref(null)
        const canvas = ref(null)
        let isDraw = ref(false)
        let ctx = reactive(null)
        let ggk = reactive(null)
        onMounted(() => {
            console.log(guauguaka.value);
            ggk = guauguaka.value
            ctx = canvas.value.getContext("2d")
            ctx.fillStyle = '#999'
            ctx.fillRect(0,0,375,150)
            ctx.font = '30px 楷体'
            ctx.fillStyle = '#FFF'
            ctx.fillText('刮刮卡',150,75)
            isDraw.value = false
        })
        const touchstart = () => {
            console.log('onMounseDown');
            isDraw.value = true
        }
        const touchmove = e => {
            if(isDraw.value) {
                console.log('touchmove',e);
                let x = e.targetTouches[0].pageX - ggk.offsetLeft
                let y = e.targetTouches[0].pageY - ggk.offsetTop
                ctx.globalCompositeOperation = 'destination-out'
                ctx.arc(x,y,20,0,2*Math.PI)
                ctx.fill()
            }
        }
        const touchend = () => {
            console.log('onMounseUp');
            isDraw.value = false
        }
        return {
            canvas,
            guauguaka,
            touchstart,
            touchend,
            touchmove,
            ctx
        }
    }
}
</script>

<style lang="less" scoped>
.awards{
    width: 100%;
    height: 150px;
    border: 1px solid red;
    text-align: center;
    font-size: 30px;
    line-height: 150px;
}
.guaguaka{
    position: relative;
    #canvas{
        position: absolute;
        left: 0;
        top: 0;
    }
}
</style>