canvas 像素操作

最新推荐文章于 2024-02-09 08:49:51 发布

神奇大叔

最新推荐文章于 2024-02-09 08:49:51 发布

阅读量405

点赞数

分类专栏： HTML5 新特性文章标签： canvas

本文链接：https://blog.csdn.net/weixin_43294560/article/details/119028948

版权

HTML5 新特性专栏收录该内容

14 篇文章 1 订阅

订阅专栏

创建像素块
	let imgData=ctx.createImageData(100,100);	创建100*100像素
	let imgData=ctx.getImageData(10,10,50,50);	复制已有像素
	let imgData=ctx.createImageData(imgData);	尺寸相同的新ImageData对象(不会复制图像数据)

设置像素块样式
	对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值：
	R - 红色 (0-255)
	G - 绿色 (0-255)
	B - 蓝色 (0-255)
	A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
	新像素默认为(0,0,0,0)
	
	第一个像素块
		imgData.data[0]=255;
		imgData.data[1]=0;
		imgData.data[2]=0;
		imgData.data[3]=255;
  	第二个像素块
		imgData.data[4]=255;
		imgData.data[5]=0;
		imgData.data[6]=0;
		imgData.data[7]=255;

获取所有像素块
	imgData.data
	
	for (var i=0;i<imgData.data.length;i+=4)
	{
		imgData.data[i+0]=255;
		imgData.data[i+1]=0;
		imgData.data[i+2]=0;
		imgData.data[i+3]=255;
	}
	
拷贝图像像素数据
	var imgData=ctx.getImageData(x,y,width,height);
		x	开始复制的左上角位置的 x 坐标。
		y	开始复制的左上角位置的 y 坐标。
		width	将要复制的矩形区域的宽度。
		height	将要复制的矩形区域的高度。
	
将图像像素数据放回画布上
	ctx.putImageData(imgData,x,y);
	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
 		imgData		规定要放回画布的 ImageData 对象。
		x			ImageData对象左上角的x坐标,以像素计。
		y			ImageData对象左上角的y坐标,以像素计。
		dirtyX		可选,水平值(x),以像素计,在画布上放置图像的位置。
		dirtyY		可选,水平值(y),以像素计,在画布上放置图像的位置。
		dirtyWidth	可选,在画布上绘制图像所使用的宽度。
		dirtyHeight	可选,在画布上绘制图像所使用的高度。

颜色反转
	for (var i=0;i<imgData.data.length;i+=4)
	{
		imgData.data[i]=255-imgData.data[i];
		imgData.data[i+1]=255-imgData.data[i+1];
		imgData.data[i+2]=255-imgData.data[i+2];
		imgData.data[i+3]=255;
	}

代码示例:

<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</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>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 像素操作

创建像素块 let imgData=ctx.createImageData(100,100); 创建100*100像素 let imgData=ctx.getImageData(10,10,50,50); 赋值已有像素 let imgData=ctx.createImageData(imgData); 尺寸相同的新ImageData对象(不会复制图像数据)设置像素块样式对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值： R - 红色 (0-255) G - 绿色
复制链接

扫一扫

专栏目录