标签：pixelArr canvas width rgba var 像素点

1.canvas宽度高度与像素点的关系

canvas的画布是一个矩形，它的宽度 * 高度就是它的像素点数。它是下面这样的栅格：

x轴左边是0，y轴上面是0。它的宽度表示它x轴有多少列像素点；它的高度表示它y轴有多少行像素点。所以canvas画布的宽度乘以高度就是这个canvas画布所有的像素点个数。

2.像素点数据的rgba值

我们可以通过getImageData()方法来取得所有的像素点的rgba数据。

使用ctx.getImageData()获取所有的数据，打印出来是一个数组：

就像这样，它的长度是所有像素点个数 * 4。为什么是乘以4，是因为rgba是四个值，这个数组从0开始每隔4个就是一个像素点的r/g/b/a值。所以数组的第0，1，2，3个值分别代表第一个像素点的r，g，b，a的值。

3.如何获取某行某列的像素点值

比如一个canvas画布的宽度是width；高度是height。已知这个canvas的像素点数据数组是pixelArr。可以通过两层遍历来一行一行的遍历像素点数据：

for(let y = 0; y < height; y++){
	for(let x = 0; x < width; x++){
		var r = pixelArr[0 + (width * y + x) * 4];
		var g = pixelArr[1 + (width * y + x) * 4];
		var b = pixelArr[2 + (width * y + x) * 4];
		var a = pixelArr[3 + (width * y + x) * 4];
	}
}

结合每4个是一个像素点的rgba值的特点，以上方法即可遍历出每个像素点的rgba值

标签：pixelArr,canvas,width,rgba,var,像素点
来源： https://www.cnblogs.com/codexlx/p/16435119.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。