移动端利用canvas画布简单实现刮刮乐效果

为了研究canvas一些属性简单实现的一个小效果  代码样式不太规范 随手写的 请问喷 初学者可以看下

css代码

<style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
             100%;
            height: 100%;
        }

        .container {
             100%;
            height: 100%;
            position: relative;
        }

        #box {
             100%;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            color: mediumspringgreen;
            font-weight: 900;
            background: url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4210473879,3554842544&fm=27&gp=0.jpg') no-repeat;
            background-size: 100% 100%;
        }

        canvas {
            position: absolute;
            left: 0;
            top: 0;
        }
</style>

　HTML代码　

<div class="container" id="container">

        <div id="box"></div>
        <canvas id="canvas"></canvas>
 </div>

JS代码

 <script>
        canvas.width = box.offsetWidth;
        canvas.height = box.offsetHeight;
        let context = canvas.getContext('2d');
        //背景填充色 
        context.fillStyle = '#ccc';
        context.fillRect(0, 0, box.offsetWidth, box.offsetHeight);

        //把灰色矩形当做目标对象 然后线当做源对象
        //destination-out    在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
        //destination-in    在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
        context.globalCompositeOperation = 'destination-out';


        let arr = ["一等奖", "二等奖", "三等奖", "谢谢惠顾"];

        box.innerText = arr[Math.floor(Math.random() * arr.length)]


        canvas.addEventListener("touchstart", function (e) {
            context.beginPath();
            context.moveTo(e.touches[0].pageX, e.touches[0].pageY);
            context.lineWidth = 20;

            context.lineCap = 'round';
            context.lineJoin = 'round';
            canvas.addEventListener("touchmove", function (e) {
                context.lineTo(e.touches[0].pageX, e.touches[0].pageY);
                context.stroke();
            })
            canvas.addEventListener("touchend", function (e) {
                context.closePath();

            })
        })
</script>