微件:GGLScratchGame

这是一个刮刮乐 Widget

 <img class="scratch-bg"
      src=""
      alt="lottery bg">

 <img class="scratch-reveal"
      src=""
      alt="reveal">

 <canvas class="scratch-canvas"></canvas>

<style> .scratch-wrapper {

 position: relative;
 width: 360px;
 height: 360px;

}

.scratch-bg, .scratch-reveal {

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;

}

.scratch-canvas {

 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 cursor: pointer;

} </style>

<script type="text/javascript"> (function () {

 var wrapper = document.currentScript.parentElement;
 var canvas = wrapper.querySelector('.scratch-canvas');
 var ctx = canvas.getContext('2d');

 var size = 360;
 canvas.width = size;
 canvas.height = size;

 var coverImg = new Image();
 coverImg.crossOrigin = 'anonymous';
 coverImg.src =
   'https://wm.gaoice.run/images/thumb/5/5a/%E5%88%AE%E5%BC%80%E5%89%8D.png/180px-%E5%88%AE%E5%BC%80%E5%89%8D.png';

 coverImg.onload = function () {
   ctx.drawImage(coverImg, 0, 0, size, size);
 };

 var scratching = false;

 function getPos(e) {
   var rect = canvas.getBoundingClientRect();
   var p = e.touches ? e.touches[0] : e;
   return {
     x: p.clientX - rect.left,
     y: p.clientY - rect.top
   };
 }

 function start(e) {
   scratching = true;
   e.preventDefault();
 }

 function move(e) {
   if (!scratching) return;
   e.preventDefault();
   var p = getPos(e);
   ctx.globalCompositeOperation = 'destination-out';
   ctx.beginPath();
   ctx.arc(p.x, p.y, 18, 0, Math.PI * 2);
   ctx.fill();
 }

 function end() {
   scratching = false;
 }

 canvas.addEventListener('mousedown', start);
 canvas.addEventListener('mousemove', move);
 canvas.addEventListener('mouseup', end);
 canvas.addEventListener('mouseleave', end);

 canvas.addEventListener('touchstart', start);
 canvas.addEventListener('touchmove', move);
 canvas.addEventListener('touchend', end);

})(); </script>