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

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

css代码

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

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

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

        #box {
            width: 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>