canvas—像素操作

canvas 像素操作

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

 API介绍：

• ImageData 对象：
  ImageData对象中存储着canvas对象真实的 像素数据，它包含以下几个只读属性：
  
  • width：图片宽度，单位是像素。
  • height：图片高度，单位是像素。
  • data：Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）
• 创建 ImageData 对象：

  var myImageData = ctx.createImageData(width, height); // 创建了一个新的具体特定尺寸的ImageData对象。所有像素被预设为透明黑, rbga为(0,0,0,0) 。

• 获取画布上 某个区域的 ImageData 对象：
  为了获得一个包含画布场景像素数据的ImageData对像，你可以用getImageData()方法

  var myImageData = ctx.getImageData(left, top, width, height); 

• 在画布上写入 像素数据
  你可以用putImageData()方法去对场景进行像素数据的写入。

  ctx.putImageData(myImageData, dx, dy);  // dx，dy 就是写入画布的坐标位置

    

实例代码：

   const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    ctx.beginPath()
    ctx.fillStyle = "red"
    ctx.fillRect(0,0,100,100)
    ctx.closePath()

    // 拷贝 画布中指定区域的像素数据。 
    const copy = ctx.getImageData(0,0,30,30)
    console.log(copy);
    
    // 将像素数据，写入到画布指定区域
    ctx.putImageData(copy, 200,200)