canvas-像素操作

最新推荐文章于 2024-08-15 15:01:02 发布

时光无声￡

最新推荐文章于 2024-08-15 15:01:02 发布

阅读量436

点赞数

分类专栏： canvas 文章标签： javascript canvas

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119111890

版权

这篇博客探讨了如何在HTML5 canvas中进行像素操作。通过getImageData()获取场景的像素数据，利用ImageData对象来直接处理像素，包括读取和写入像素数据。此外，介绍了putImageData()方法用于将修改后的像素数据放回canvas，并讲解了如何创建和操作ImageData对象的单个像素。

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

在canvas中的像素操作

到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上，
你可以直接通过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参数表示你希望在场景内左上角绘制的像素数据所得到的设备坐标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
     
				margin: 0;
				padding: 0;
			}
			html,body{
     
				height: 100%;
				overflow: hidden;
			}
			body{
     
				background: pink;
			}
			#test{
     
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
     
			var canvas = document.querySelector("#test");
			if(canvas.getContext)</