console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
  <style>
    #image-container {
      /* position: relative; */
    }
    #image{
        /* user-select: none; */
        /* pointer-events: none; */
        max-width: 100%;
    }
    #mosaic-overlay {
      position: absolute;
      top:0;left:0;
      z-index:9;
    }
  </style>
</head>
<body>
  <div id="image-container">
    <img src="https://www.lilnong.top/static/img/wx-linong.jpg" id="image" alt="Image" />
    <canvas id="mosaic-overlay"></canvas>
    
  </div>
  <button class="btn">撤回</button>
  <script>
    const image = document.getElementById("image");
    const mosaicOverlay = document.getElementById("mosaic-overlay");
    image.onload = ()=>{
        mosaicOverlay.width = image.width
        mosaicOverlay.height = image.height
    }
    const ctx = mosaicOverlay.getContext("2d");
    // 设置马赛克效果的尺寸
    const mosaicSize = 20; // 调整这个值来改变马赛克块的大小
    let isMosaicing = false;
    // 监听鼠标按住左键事件
    const handleStart = () => {
      isMosaicing = true;
    }
    mosaicOverlay.addEventListener("mousedown", handleStart);
    mosaicOverlay.addEventListener("touchstart", handleStart);
    // 监听鼠标松开事件
    const handleMove = () => {
      isMosaicing = false;
    }
    window.addEventListener("mouseup", handleMove);
    window.addEventListener("touchend", handleMove);

    // 监听鼠标移动事件，添加马赛克效果
    const btn = document.querySelector('.btn')
    let arr  = []
    const handleEnd = (e) => {
      console.log(e,'e');
      if (isMosaicing) {
        const point = e?.touches?.[0] || e;
        const x = point.clientX - mosaicSize / 2;
        const y = point.clientY - mosaicSize / 2;
        arr.push({x,y})
        console.log(arr,'arr');
        // console.log('x:',x,'y:',y);
        // 绘制马赛克块
      ctx.drawImage(
          image,
            Math.random() * image.width,
            Math.random() * image.height,
          mosaicSize,
          mosaicSize,
          x,
          y,
          mosaicSize,
          mosaicSize
        );
        
      }
    }
    mosaicOverlay.addEventListener("mousemove", handleEnd);
    mosaicOverlay.addEventListener("touchmove", handleEnd);
    btn.addEventListener('click',( )=>{
        // let item  = arr.unshift()
        // ctx.clearReact()
        ctx.clearRect(0, 0, mosaicOverlay.width, mosaicOverlay.height);
        //     ctx.drawImage(
        //   image,
        //     Math.random() * image.width,
        //     Math.random() * image.height,
        //   mosaicSize,
        //   mosaicSize,
        //   item.x,
        //   item.y,
        //   mosaicSize,
        //   mosaicSize
        // )
        ctx.cle
          }
    )


  </script>
</body>
</html>