像素操作

获取画布像素数据 getImageData() 方法用来获取画布中当前选中区域的像素数据。

getImageData(x, y, width, height)

 

ImageData 对象作为 getImageData() 方法的返回值，存储着canvas 对象真实的像素数据

// 获取左上角坐标为 (0,0)，宽高为 50 的矩形区域 let imgData = ctx.getImageData(0, 0, 50, 50);

console.log( imgData ); // ImageData 对象

 

 putImageData() 用来写入画布的像素数据。

ctx.fillStyle = "orange"; ctx.fillRect(0, 0, 100, 100);

let imgData = ctx.getImageData(0, 0, 100, 100);

// 从 (100, 100) 开始绘制所得像素数据

ctx.putImageData(imgData, 100, 100)

 

createImageData() 用来创建新的像素数据。

// 创建一个宽高各 100 的像素数据区域

let imgData = ctx.createImageData(100, 100);

console.log(imgData);

// 把新创建出来的像素数据写入到画布(100,100)的位置

ctx.putImageData(imgData, 100, 100);

for(let i = 0; i < imgData.data.length; i++){

// 把每⼀个像素点的rgba值中的a值从0改成255

imgData.data[4 * i + 3] = 255;

}

ctx.putImageData(imgData, 100, 100);