【canvas】30行代码教你画一个刮刮乐

且陶陶

发布于 2023-04-12 15:58:10

75300

代码可运行

文章被收录于专栏：Triciaの小世界Triciaの小世界

运行总次数：0

代码可运行

粥六快乐！！

💌 摸鱼时间，点进了充满童年回忆的4399，页面还是那个味道一点也没变。突发奇想，要不尝试做个4399小游戏玩玩？太复杂的也费事，就整个简单的刮刮乐吧。 ✔开整~

分析

🎨 刮刮乐游戏肯定需要两张图片，通过鼠标的移动控制图片的绘制路径

🕐步骤1

准备1个canvas容器：

<canvas width="800px" height="600px"></canvas>

🕑 步骤2

注册图片

      const one = new Image()
      one.src = './1.jpg' // 顶部图片

      const two = new Image()
      two.src = './2.jpg' // 底部图片

🕒 步骤3

最核心的是实现擦除效果，鼠标按下擦除，鼠标抬起停止擦除。
设置一个标记flag，给canvas设置一个鼠标点击事件，鼠标按下时flag设为true。

🕓 步骤4

擦除效果实现：
可以在鼠标按下时，将第二张图片绘制到第一张图片的顶上。

实现

 // 1. 绘制图片1到canvas中
      const canvas = document.querySelector('canvas')
      const ctx = canvas.getContext('2d')
      // 2. 创建图片
      const one = new Image()
      one.src = './1.jpg' // 顶部图片
      // 等图片加载完、
      one.addEventListener('load', function () {
        ctx.drawImage(one, 0, 0, canvas.width, canvas.height)
      })
      const two = new Image()
      two.src = './2.jpg' // 底部图片
      // 给canvas注册鼠标移动事件
      let flag = false
      canvas.addEventListener('mousedown', function () {
        // 鼠标按下
        flag = true
      })
      canvas.addEventListener('mousemove', function (e) {
        // 实现擦除
        if (flag) {
          const x = e.offsetX - 5
          const y = e.offsetY - 5
          //  从第二张图片上绘制一部分到第一张图片
          // 从第二张图片中截取20 * 20 的图片绘制到canvas上
          ctx.drawImage(two, x, y, 60, 60, x, y, 60, 60)
        }
      })
      canvas.addEventListener('mouseup', function () {
        // 鼠标抬起
        flag = false
      })