HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)_canvas表格标注图像区域

作者：2023面试高手 | 2024-02-18 10:49:21

踩

canvas表格标注图像区域

使用图像

在canvas中插入图像


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function Draw(){
				//使用三种方式插入图像
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var newImg=new Image(); //使用Image()构造函数创建图像对象
				newImg.src="../img/3.jpg";
				newImg.οnlοad=function(){
					//从左上角开始绘制图像
					context.drawImage(newImg,0,0); 
					 //从指定坐标开始绘制图像，并设置图像宽和高 指定这些参数可以使得图像可以缩放
					context.drawImage(newImg,250,100,150,200);
					//裁剪一部分图像放在左上角，并稍微放大
					context.drawImage(newImg,90,80,100,100,0,0,120,120); 
				}
			}	
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
	</body>
</html>

三种方法插入图片的效果

裁剪区域

在路径绘图中，我们使用了两大绘图方法，即用于绘制线条的 stroke()方法和用于填充区域的fill()方法。关于路径的处理，还用一种方法叫做裁剪方法clip()。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>裁剪区域</title>
		<script type="text/javascript">
			function Draw(){
				//使用裁剪区域绘图
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var newImg=new Image(); //使用Image()构造函数创建图像对象
				newImg.src="../img/3.jpg";
				newImg.οnlοad=function(){
					//设置一个圆形的裁剪区域
					ArcClip(context);
					//从左上角开始绘制图像
					context.drawImage(newImg,0,0); 
					 //设置全局半透明
					 context.globalAlpha=0.6;
					 //使用路径绘制的矩形
					 FillRect(context);
				}
			}
			function ArcClip(context){
				context.beginPath();
				context.arc(150,150,100,0,Math.PI*2,true);//设置一个圆形的绘图路径
				context.clip();  //裁剪区域
			}
			//使用路径绘制的矩形
			function FillRect(context){
				context.beginPath();
				context.rect(150,150,90,90);
				context.fillStyle="#f90";
				context.fill();
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
	</body>
</html>

高大上效果

注：在绘制图片之前，，首先使用方法 ArcClip(context)设置一个圆形裁剪的区域：先设置一个圆形的绘图路径，再调用 clip()方法，即完成了区域的裁剪。接着绘制了图像，把加载的图片，从画布的左上角开始绘制，可以看见，只有在裁剪区域里才有绘制。最后，又使用了路径的方法回执了矩形，并填充了半透明的颜色，也只在裁剪区域内有绘制。

把Draw函数做一下改动就可以取消裁剪区域


	function Draw2(){
				//使用裁剪区域绘图
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var newImg=new Image(); //使用Image()构造函数创建图像对象
				newImg.src="../img/3.jpg";
				newImg.οnlοad=function(){
					//保存当前状态
					context.save();
					//设置一个圆形的裁剪区域
					ArcClip(context);
					//从左上角开始绘制图像
					context.drawImage(newImg,0,0);
					//恢复被保存的状态
					context.restore();
					 //设置全局半透明
					 context.globalAlpha=0.6;
					 //使用路径绘制的矩形
					 FillRect(context);
				}
			}
			function ArcClip(context){
				context.beginPath();
				context.arc(150,150,100,0,Math.PI*2,true);//设置一个圆形的绘图路径
				context.clip();  //裁剪区域
			}
			//使用路径绘制的矩形
			function FillRect(context){
				context.beginPath();
				context.rect(150,150,90,90);
				context.fillStyle="#f90";
				context.fill();
			}
			window.addEventListener("load",Draw2,false);

仔细观察一下与上幅图的区别

在裁剪区域之前，首先调用了save()方法保存了当前上下文的状态；在裁剪区域内绘制了图片之后，调用了 restore()方法恢复了上下文状态，即裁剪区域之前的状态，所以在接下来的绘图中不再受裁剪区域限制。如图中的矩形已经超出了裁剪区域的范围。

使用文本

在Canvas中，也可以绘制文本。可以使用填充的方法绘制，也可以使用描边的方法绘制，并且在绘制文字之前，还可以设置文字的文字样式和对齐方式。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制文本</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//填充方式绘制文本
				context.fillStyle="#f90";
				context.font="bold 36px impact";
				//fillText(text,x,y,maxwidth) text要绘制的文本，x起点横坐标，y纵坐标,maxwidth可选参数，表示文本的最大宽度
				context.fillText("Hello World!",10,50);
				//描边方式绘制文本
				context.strokeStyle="#90";
				context.font="bold italic 36px impact";
				context.strokeText("Hello World!",10,100);
				
				
				//度量绘制文本宽度
				var text="Hllo World!";
				context.fillStyle="#90";
				context.font="bold 30px impact";
				//度量文本是以当前设置的文本样式为基础。
				var tm=context.measureText(text);
				//根据已经设置的文本样式度量文本
				context.fillText(text,10,150);
				context.fillText(tm.width,tm.width+15,150);
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

呐呐，运行效果，感觉如何

阴影效果


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制文本</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置阴影属性
				context.shadowColor="#666"; //颜色
				context.shadowOffsetX=5;//阴影的横向位移量，向右为正，左为负
				context.shadowOffsetY=5; //纵向位移量，向下为正，上为负
				context.shadowBlur=5.5; //高斯模糊，值越大，阴影边缘越模糊
				
				//填充方式绘制文本
				context.fillStyle="#f90";
				context.font="bold 36px impact";
				context.fillText("Hello World!",10,50);
				
				context.fillStyle="#90";
				context.arc(100,100,30,0,Math.PI*2,false);
				context.fill();
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

是不是再次感觉到了神奇

操作像素

在Canvas中，绘图API还提供了像素级的操作方法，分别是：createImageData()。getImageData()和putImageData()。使用这些方法，可以直接操纵底层的像素数据。

先来体会一下效果

实现方式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作像素</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				var newImg=new Image();
				newImg.src="../img/3.jpg";
				newImg.οnlοad=function(){
					context.drawImage(newImg,0,0,400,300);
					context.save();
					//获取图像数据
					var imageData=context.getImageData(0,0,400,300);
					//修改ImageData对象的data数据，处理为反向
					for(var i=0,n=imageData.data.length;i<n;i+=4){
						//红色部分
						imageData.data[i+0]=255-imageData.data[i+0];
						//绿色部分
						imageData.data[i+1]=255-imageData.data[i+1];
						//蓝色部分
						imageData.data[i+2]=255-imageData.data[i+2];
					}
					//绘制该图像数据
					context.putImageData(imageData,200,150);
				}
				
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

注：这个也要放在服务器上运行了，不能直接本地测试

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/107399