canvas 操作像素窗帘效果

Posted 2020-10-06 1点

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 操作像素窗帘效果相关的知识，希望对你有一定的参考价值。

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
		canvas{
		background:#eee;
		}
		</style>
		<title>noTitle</title>
		<meta charset="utf-8">
		<script>
		
			window.onload=function  () {
			 var canvas=document.getElementById("canvas");
			 var cobj=canvas.getContext("2d");
			 var img=document.getElementById("img");
			 cobj.drawImage(img,0,0,200,240);
			 var imgData=cobj.getImageData(0,0,200,240)		 
			 cobj.putImageData(menl (imgData,6),200,240);
			}




			  function menl (imgData,num) {
				for (var i=0; i<imgData.width*imgData.height; i++) {
					   if(i%6==0){  
					   imgData.data[i*4+0]=0;
					   imgData.data[i*4+1]=0;
					   imgData.data[i*4+2]=0;
					   imgData.data[i*4+3]=0;
					   }
					 }
					 return imgData;
			  }
		</script>
	</head>
	<body>
		<canvas id="canvas" width=500  height=500>
		</canvas>
		<img src="图片.jpg" id="img" hidden>
	</body>
</html>

　　效果：

图片：

2017-09-12 11:29:35

以上是关于canvas 操作像素窗帘效果的主要内容，如果未能解决你的问题，请参考以下文章

canvas对像素的操作&&实现图像灰度化处理&&实现马赛克效果

Canvas的imageData与常见像素操作方法

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

Canvas API

使用canvas给图片增加滤镜

canvas 操作像素反相

canvas 操作像素 窗帘效果

canvas 操作像素窗帘效果