查看“︁微件:GGLScratchGame”︁的源代码

<noinclude>
这是一个刮刮乐 Widget
</noinclude>

<div class="scratch-wrapper">
  <!-- 背景 -->
  <img class="scratch-bg"
       src="https://wm.gaoice.run/images/thumb/b/b6/%E5%9B%BE%E7%89%871.png/180px-%E5%9B%BE%E7%89%871.png"
       alt="lottery bg">

  <!-- 刮开后 -->
  <img class="scratch-reveal"
       src="https://wm.gaoice.run/images/thumb/4/4a/%E5%88%AE%E5%BC%80%E5%90%8E.jpg/180px-%E5%88%AE%E5%BC%80%E5%90%8E.jpg"
       alt="reveal">

  <!-- canvas 覆盖层 -->
  <canvas class="scratch-canvas"></canvas>
</div>

<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>