canvas 滤镜效果通过更改像素

最新推荐文章于 2023-01-17 11:49:51 发布

朱宝鑫

最新推荐文章于 2023-01-17 11:49:51 发布

阅读量766

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/qq_30529627/article/details/51226081

版权

canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滤镜效果</title>
	</head>
	<body>
		<canvas id="kycanvas"   style="display: block;margin: auto;border: 1px solid #666666">
			当前浏览器不支持canvas，请更换浏览器后再试！
		</canvas>
		<button id="btn" style="width: 100px;height: 40px;" οnclick="failter()" >获取图片</button>
		<canvas id="kycanvas1"   style="display: block;margin: auto;border: 1px solid #666666;">
			当前浏览器不支持canvas，请更换浏览器后再试！
		</canvas>		
	</body>
	<script>
		var image = new Image();
			var canvas = document.getElementById("kycanvas");
			var context = canvas.getContext("2d");
			canvas.width = 200;
			canvas.height = 200;
			var canvas1 = document.getElementById("kycanvas1");
			var context1 = canvas1.getContext("2d");
			canvas1.width = 200;
			canvas1.height = 200;
			image.src = "images/im1.jpg";
			image.onload = function (){
				context.drawImage(image,0,0,canvas.width,canvas.height);
			}
			function failter(){
				var imageData = context.getImageData(0,0,canvas.width,canvas.height);
				var pixelData = imageData.data;//获取imageData 对象中的每个像素
				for( var i = 0; i < canvas.width * canvas.height;i++){//循环所有像素
					pixelData[4*i+0] = 255;	//r	
					//pixelData[4*i+1] = 0;	//g		
					//pixelData[4*i+2] = 0;	//b		
					pixelData[4*i+3] = 100;	//a	
				}
				context1.putImageData(imageData,0,0,20,20,canvas.width-40,canvas.height-40);
			}
	</script>
</html>

朱宝鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 滤镜效果通过更改像素

滤镜效果当前浏览器不支持canvas，请更换浏览器后再试！获取图片当前浏览器不支持canvas，请更换浏览器后再试！ var image = new Image(); var canvas = document.getElementById("kycanvas"); var context = canvas.getC
复制链接

扫一扫