js+canvas的像素操作的练习

最新推荐文章于 2022-09-04 08:26:06 发布

清砾

最新推荐文章于 2022-09-04 08:26:06 发布

阅读量594

点赞数

分类专栏：技术小妙招文章标签： js html

本文链接：https://blog.youkuaiyun.com/m0_46690660/article/details/108500862

版权

技术小妙招专栏收录该内容

20 篇文章

订阅专栏

1.练习一

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>像素处理</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#mycanvas {
				margin: auto;
				background-color: bisque;
			}
		</style>
	</head>

	<body>
		<canvas id="mycanvas" width="500px" height="500px"></canvas>
		<script type="text/javascript">
			//获取对象
			var mycanvas = document.getElementById("mycanvas");
			// 搭建环境
			var cxt = mycanvas.getContext("2d");
			// 创建新的空白图片
			var myImg = cxt.createImageData(250,250);
			// 设置像素点的颜色
			for (var i = 0; i < myImg.data.length; i+=4) {
				myImg.data[i+0]=255;//红
				myImg.data[i+1]=0;//绿
				myImg.data[i+2]=0;//蓝
				myImg.data[i+3]=150;//不透明度
			}
			//将图像数据放回到画布中
			cxt.putImageData(myImg,0,0);
			// 从画布上复制一个区域
			var myImg2 = cxt.getImageData(0,0,250,250);
			// 将复制的区域放到另外的地方
			cxt.putImageData(myImg2,250,250);
			var myImg3 = cxt.getImageData(250,0,250,250);
			cxt.putImageData(myImg3,125,125);
			var myImg4 = cxt.getImageData(0,0,250,250);
			cxt.putImageData(myImg4,125,125);
			var myImg4 = cxt.getImageData(125,125,250,250);
			cxt.putImageData(myImg4,0,0);
		</script>
	</body>

</html>

2.练习二

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>像素处理</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#mycanvas {
				margin: auto;
				background-color: bisque;
			}
		</style>
	</head>

	<body>
		<canvas id="mycanvas" width="500px" height="500px"></canvas>
		<script type="text/javascript">
			//获取对象
			var mycanvas = document.getElementById("mycanvas");
			// 搭建环境
			var cxt = mycanvas.getContext("2d");
			cxt.globalAlpha=1;
			
			cxt.fillStyle="green";
			cxt.fillRect(0,0,200,200);
			//source是后面画的在上面，destination是后面画的在下面
//			cxt.globalCompositeOperation="source-over";//都显示，后的在上面
//			cxt.globalCompositeOperation="source-atop";//显示相交部分
//			cxt.globalCompositeOperation="source-in";//显示与源图像相交的部分
//			cxt.globalCompositeOperation="source-out";//显示与源图像不相交的部分
//			cxt.globalCompositeOperation="destination-over";//都显示，前的在上面
//			cxt.globalCompositeOperation="destination-atop";//显示相交部分
//			cxt.globalCompositeOperation="destination-in";//显示与源图像相交的部分
//			cxt.globalCompositeOperation="destination-out";//显示与源图像不相交的部分
//			cxt.globalCompositeOperation="lighter";//显示两个都显示，相交部分融合
//			cxt.globalCompositeOperation="copy";//显示源图像
//			cxt.globalCompositeOperation="xor";//相交部分不显示
			cxt.fillStyle="blue";
			cxt.arc(200,200,100,0,2*Math.PI);
			cxt.fill();
		</script>
	</body>

</html>