35 像素操作

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

丨Anna丨

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

阅读量612

点赞数

分类专栏： # canvas 前端重拾文章标签： canvas

本文链接：https://blog.csdn.net/u014331138/article/details/109362381

版权

前端重拾同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

canvas

14 篇文章 0 订阅

订阅专栏

本文介绍如何使用ImageData对象直接操作画布中的像素数据，包括获取、修改和放置像素的方法及属性，如getImageData(), putImageData(), createImageData()等。

摘要由CSDN通过智能技术生成

35 像素操作

我们可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中

语法

得到场景像素数据
	getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据
	
	ctx.getImageData(sx, sy, sw, sh)
		sx:将要被提取的图像数据矩形区域的左上角 x 坐标。
		sy:将要被提取的图像数据矩形区域的左上角 y 坐标。
		sw:将要被提取的图像数据矩形区域的宽度。
		sh:将要被提取的图像数据矩形区域的高度。
	
ImageData对象
	ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
		width:图片宽度，单位是像素
		height:图片高度，单位是像素
		data:Uint8ClampedArray类型的一维数组，
			包含着RGBA格式的整型数据，范围在0至255之间（包括255）
			R:0 --> 255(黑色到白色)
			G:0 --> 255(黑色到白色)
			B:0 --> 255(黑色到白色)
			A:0 --> 255(透明到不透明)
			
在场景中写入像素数据
	putImageData()方法去对场景进行像素数据的写入。
	putImageData(myImageData, dx, dy)
		dx和dy参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标
		
创建一个ImageData对象
	ctx.createImageData(width, height);
		width : ImageData 新对象的宽度。
		height: ImageData 新对象的高度。
		
	默认创建出来的是透明的

示例

	<head>
		<meta charset="UTF-8">
		<title>21_阴影</title>
		<style>
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #BBAAFF;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
		<script type="application/javascript">
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgba(60,180,255,0.2)";
				ctx.fillRect(0,0,100,50);
				
				// 获取场景像素数据
				var imageData = ctx.getImageData(0,0,100,50);
				// 循环遍历设置透明度
				for(var i = 0; i < imageData.data.length; i++){
					imageData.data[4*i + 3] = 255;
				}
				// 将所得的像素点重新设置到一个位置
				ctx.putImageData(imageData,100,50);
			}
		</script>
	</body>

效果