canvas图像处理

最新推荐文章于 2025-07-02 16:11:33 发布

原创最新推荐文章于 2025-07-02 16:11:33 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #getImage #putImage #draw

本文深入讲解Canvas绘图技术，涵盖图像加载与绘制、属性保存与恢复、像素级操作等内容，适用于前端开发者提升绘图技能。

在线示例操作：
http://jsrun.net/aUhKp/edit

canvas绘图

获取canvas的对象

	let canvas = document.getElementById('demo')
	let contxt = canvas.getContext("2d");
	// 设定画布的大小，或在元素属性设定
	canvas.width = 300;
	canvas.height = 300;

可以使用现有的图片进行操作。
创建一个Image对象，

	let image = new Image();

传入图片地址，

	image.src = 'test.png';
	// 需要等待图片加载完成进行操作。
	image.onload=function(){
		// 动态设定canvas画布的大小，和图片的大小一致，必须等图片加载完成设定
		contxt.width = image.width;
		contxt.height = image.height;
		
		//图片加载完，就可以绘制到canvas中了，
		contxt.drawImage(image,0,0);
	}

drawIamge()
drwaImage(img,x,y);
以原大小绘制图片。

	img:图片源对象
	x:  canvas对象上的起点x坐标
	y:canvas对象上的y坐标

drawImage(img,x,y,imgW,imgH);
对绘制的图片进行缩放。

	img:图片源对象
	x:  canvas对象上的起点x坐标
	y:canvas对象上的y坐标
	imgW:绘制到canvas对象上的图片宽度
	imgH:绘制到canvas对象上的图片高度

drawImage(img,imgX,imgY,imgW,imgH,canvasX,canvasY,canvasW,canvasH);
对绘制的图片进行裁剪。

	img:图片源对象
	imgX:  截取的源图片上的x坐标
	imgY:截取的源图片上的y坐标
	imgW:截取的源图片宽度
	imgH:截取的源图片高度
	canvasX:绘制到canvas对象上的x坐标
	canvasY:绘制到canvas对象上的y坐标
	canvasW:绘制到canvas对象上的宽度
	canvasH:绘制到canvas对象上的高度

save()、restore()
save()保存当前操作的属性，可延续到后续操作。减少相同的设置。

保存到队列中，存取方式为先入后出；
保存的状态：
1.当前应用的变形（移动、缩放、旋转）
2.strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit,
shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation
3.当前的裁剪路径

restore()恢复保存的设置，用来当前操作的属性定义。

	ctx.fillRect(0,0,canvas.width,canvas.height);       // 一个默认黑色的矩形
	ctx.save();             //保存了fillStyle
	
	ctx.fillStyle = '#ff00ff';
	ctx.fillRect(10,10,canvas.width-20,canvas.height-20);
	ctx.save();
	
	ctx.fillStyle="#ffff00";
	ctx.fillRect(20,20,canvas.width-40,canvas.height-40);
	
	ctx.restore();      //fillStyle 为#ff00ff
	ctx.fillRect(30,30canvas.width-60,canvas.height-60);
	
	ctx.restore();      //fillStyle 为#ffffff
	ctx.fillRect(50,50canvas.width-100,canvas.height-100);

图片像素级操作
可以创建新的ImageData或者获取当前的canvas对象，以一位数组存储RGBA格式的整型数组。

	// 新建，所有像素默认透明黑
	var imageData= ctx.createImageData(w,h);
	// 获取当前的canvas像素数据
	var imageData= ctx.getImageData(left,top,w,h);
	var pixel = imageData.data;
	// 进行像素级操作
	参数说明：
		left ：左上角x值，
		top:左上角y值，
		w:宽度
		h:高度
	ctx.putImageData(imageData,0,0);
	参数说明：
		图片对象，
		canvas对象上的左上角x值，
		canvas对象上的左上角y值

像素说明：

	// 第i个像素
	pile[4*i+0]     - r
	pile[4*i+1]     - g
	pile[4*i+2]     - b
	pile[4*i+3]     - a
	//坐标点（x,y） ,这个坐标点时按照canvas左上角（0,0）开始
	let i = y*canvas.width+x;