canvas像素操作、save与restore、合成与变形

本文链接：https://blog.csdn.net/m0_65037325/article/details/126225258

这篇博客深入探讨了HTML5 Canvas的像素操作，包括获取和写入像素数据，以及创建像素数据的实例。此外，还详细阐述了canvas的save和restore功能，解释了它们如何保存和恢复绘图状态。最后，介绍了canvas的图像合成和变形，包括translate、rotate、scale方法，并展示了使用这些方法设计小球匀速运动和行星绕太阳转的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、canvas像素操作

（1）获取图像像素

imageData = ctx.getImageData(x,y,w,h)
imageData  对象
		   width
		   height
		   data
getImageData返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据

获取图像像素后的imageData中包含三项：

在这里插入图片描述

其中宽高分别为获取图像宽高时的大小，data则存放的是在该大小内所有的像素点的详细信息。data是一个数组，每四位秒数一个像素点，分别代表rgba。例如(创建像素的代码中也会提到):

在这里插入图片描述

（2）写入像素数据

ctx.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

imgData : 规定要放回画布的 ImageData 对象。
x,y: ImageData 对象左上角的 x y坐标，以像素计。
dirtyX,dirtyY: 可选。水平值（x）、垂直值（y），以像素计，在画布上放置图像的位置。
dw,dh ：可选。在画布上绘制图像所使用的宽度与高度。

（3）创建像素数据

ctx.createImageData(width, height);

width : ImageData 新对象的宽度。
height: ImageData 新对象的高度

注意：创建一个ImageData对象，默认创建出来的是个透明的

<script type="text/javascript">
			// 获取画布
			var canvas = document.getElementById('canvas');

			// 设置画布的宽高
			canvas.width = 800;
			canvas.height = 600;
			// 获取画笔
			var ctx = canvas.getContext('2d');

			ctx.fillStyle = 'red';
			/* 
			 imageData
				width :横向像素点的个数
				height:纵向像素点的个数
				
				data: 数组 Uint8ClampedArray(40000) 类型的一维数组
				100x100x4 (40000);
				
				每个像素 的rgba信息
				r : 0 -255
				g : 0 -255
				b : 0 -255
				a : 0 -255 //透明度 (0-255)
				
			 */

			// 创建imageData对象
			var imageData = ctx.createImageData(100, 100); //默认创建出来是一个透明的

			for (var i = 0; i < imageData.data.length; i++) {
				// 0 3   4  7
				// 000 255 000 255
				imageData.data[4 * i + 3] = 255; //设置该对象的A 为255 的透明的
			}


			// 写入像素
			// x,y 左上角的 xy坐标位置
			ctx.putImageData(imageData, 100, 100);
			console.log(imageData);
		</script>

（4）小案例，将canvasA画布的图像复制到canvasB中

第一步：分别获取画布
第二步：将第一个画布添加一张图片，让其在加载时渲染
第三部：书写点击事件函数，获取A画布内容，渲染到B画布中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				background-color: #99CCFF;
			}

			.canvas {
				background-color: #fff;
			}

			button {
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvasA" class="canvas" width="600" height="360">
			您的浏览器不支持，canvas标签
		</canvas>

		<canvas id="canvasB" class="canvas" width="600" height="360">
			您的浏览器不支持，canvas标签
		</canvas>

		<button type="button" onclick="copyImg()">复制图像</button>
		<script type="text/javascript">
			// 获取画布 A
			var canvasA = document.getElementById('canvasA');
			// 获取画笔 A
			var ctxA = canvasA.getContext('2d');

			// 获取画布 B
			var canvasB = document.getElementById('canvasB');
			// 获取画笔 B
			var ctxB = canvasB.getContext('2d');

			/* 
			 imageData
				width :横向像素点的个数
				height:纵向像素点的个数
				
				data: 数组 Uint8ClampedArray(40000) 类型的一维数组
				100x100x4 (40000);
				
				每个像素 的rgba信息
				r : 0 -255
				g : 0 -255
				b : 0 -255
				a : 0 -255 //透明度 (0-255)
				
			 */
			// 给canvasA 绘制图像
			var img = new Image();
			// 设置图片路径
			img.src = './img/hl.jpg';
			// 图片加载完成时绘制
			img.onload = function() {
				ctxA.drawImage(img, 0, 0, img.width / 1.5, img.height / 1.5)
			}

			function copyImg(