Canvas实现刮奖效果

治电小白菜

修改于 2023-09-23 15:16:24

6510

修改于 2023-09-23 15:16:24

文章被收录于专栏：技术综合技术综合

示例

演示地址, 请使用开发者工具切换到手机模式

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    #canvas {
      background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAfAD0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8/wCirmkaTPrmoRWVu9tHNLna15dRW0QwCTmSVlReB3IycAckCuk/4VTrX/P74b/8KjTP/kircox3ZNmzj6uf2NqH9sf2T9huf7V8/wCy/YfJbz/O3bfL2Y3b93G3Gc8V1Wn+A/EGi6tYzWun6R4kvXkZLfT7C/tdVd5PLdg5t7eV2YJtL/MpT5QHDKSp9/0yz8X6n4b1S31DUPilczafYl7Sa98NTCUyNdwbWWM3pSeWMNKyEgOgYuHzBEFwqVlC1i4wbPkqrkOjahcT2EMVjcyTahj7HGkLFrnLmMeWMfPl1ZeM/MpHUV7D8SZfH9/qGgf2jqvi3T9LtfK2av4qtbjS4o7mISMs23zpV81Yl4aLEjlThGkYs+lDqUL694H1HQdHvry4j0aS5h1IW9sBpijU77zL025QW8YWQo4V2EcSFl3htk8Z7Z2TSDl1PAKK7D4heKrbXvsFjbQabL9g8zzdUsNLgsPtkj7c4SKOP90uzCbxvOXZtu8Rx8fXRFtq7RDCiiimIms50tbyCaW3jvI45FdreYsElAOSjFGVsHodpB54IPNek2niDwlq1npEdr4O8LWeqzyTw3MN/d6mkKlQrQuJftQVBJuMeGOFaMu7qj/J5hRUSjzdSk7HpPiTxBp+vfFG6fwZonhvSrZb+8NnNOqpa3MLFtjSx30jQJ8gyqhUALYC5CgbH/C5E8Kf8S+C08N+JY7j5dTvLXw9aWsM0PVYYQ1qrHawSUvLGR5scYEZSNjN49RUexi0k9bD5n0O88eahcalo8M8OoeG9R0hp12PpulWWm30b7WISWGONJeFPzFTJDuIAkYjjg6KK0jHlViW7n//2Q==);
      background-repeat: no-repeat;
      background-size: contain;
      background-color: #222;
      background-position: center;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="200" height="50">
    Canvas not supported
  </canvas>
  <script>
    class Scratch {
      constructor (selector, eraserSize) {
        this.canvas = document.querySelector(selector) // 获取canvas
        if (!this.canvas) throw Error('选择器无效!')
        this.context = canvas.getContext('2d') // 初始化画布
        this.eraserSize = eraserSize // 设置擦除大小
        this.isDrag = false // 是否在擦除的状态
        this._init() // 画布设置
        this._moveListener() // 监听擦除
      }
      _init () {
        this.context.save()
        this.context.fillStyle = '#666'
        this.context.beginPath()
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height)
        this.context.restore()
      }
      /**
       * 获取当前位置
       */
      getCurPosition (e) {
        const x = e.targetTouches[0].clientX
        const y = e.targetTouches[0].clientY
        const map = canvas.getBoundingClientRect()
        return {
          x: x - map.left,
          y: y - map.top
        }
      }
      /**
       * 擦除当前位置
       */
      cleanCur (position) {
        this.context.save()
        this.context.beginPath()
        this.context.arc(position.x, position.y, this.eraserSize, 0, Math.PI * 2, false)
        this.context.clip()
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
        this.context.restore()
      }
      /**
       * 擦除移动监听
       */
      _moveListener () {
        this.canvas.addEventListener('touchstart', e => {
          let position = this.getCurPosition(e)
          this.isDrag = true
          this.cleanCur(position)
        })

        this.canvas.addEventListener('touchmove', e => {
          let position
          if (this.isDrag) {
            position = this.getCurPosition(e)
            this.cleanCur(position)
          }
        })

        this.canvas.addEventListener('touchend', e => {
          this.isDrag = false
        })
      }
    }

    new Scratch('#canvas', 15);
  </script>
</body>
</html>