Canvas(十五) canvas图像复制

canvas

发布日期: 2020-06-23

更新日期: 2020-06-19

文章字数: 110

阅读时长: 1 分

阅读次数:

图像复制一般两个接口共同使用

getImageData(x,y,w,h)

ImageData 对象 width height data

putImageData(img,dx,dy)

<!DOCTYPE html>
<html>
  <body>
    <canvas
      id="myCanvas"
      width="300"
      height="150"
      style="border:1px solid #d3d3d3;"
    >
      你的浏览器不支持canvas
    </canvas>

    <script>
      var c = document.getElementById('myCanvas')
      var ctx = c.getContext('2d')
      ctx.fillStyle = 'green'
      ctx.fillRect(10, 10, 50, 50)

      function copy() {
        var imgData = ctx.getImageData(10, 10, 50, 50)
        ctx.putImageData(imgData, 10, 70)
      }
    </script>

    <button onclick="copy()">复制</button>
  </body>
</html>