canvas-绘制路径

最新推荐文章于 2024-08-14 05:19:50 发布

原创最新推荐文章于 2024-08-14 05:19:50 发布 · 659 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

canvas 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了canvas绘制路径的步骤，包括创建路径起始点、画图命令、封闭路径以及渲染图形。文中详细讲解了如何绘制三角形和矩形，并提到了lineCap属性，用于定义线段末端的样式。此外，还探讨了save和restore方法在维护canvas状态中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

步骤

1.首先，你需要创建路径起始点。
2.然后你使用画图命令去画出路径
3.之后你把路径封闭。
4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

绘制三角形

beginPath()
		新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。	
	生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
	所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，
	然后我们就可以重新绘制新的图形。

moveTo(x, y)
	将笔触移动到指定的坐标x以及y上
	当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点
	会抬笔
lineTo(x, y)
	将笔触移动到指定的坐标x以及y上
	绘制一条从当前位置到指定x以及y位置的直线。
	不会抬笔
closePath()
	闭合路径之后图形绘制命令又重新指向到上下文中。
		闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
	如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
		当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
	但是调用stroke()时不会自动闭合
	
stroke()
	通过线条来绘制图形轮廓。
	不会自动调用closePath()
	
fill()
	通过填充路径的内容区域生成实心的图形。
	自动调用closePath()

绘制矩形

rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。
也就是说，当前笔触自动重置会默认坐标

下面要指定是填充还是线条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//拿到画布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				ctx.strokeStyle="deeppink";
				ctx.fillStyle="green"
				ctx.lineWidth=1;
				
				ctx.moveTo(100,100);
				ctx.lineTo(100,200);
				ctx.lineTo(200,200);
				ctx.closePath();
				ctx.fill();
				
				
				//清空路径容器
				ctx.beginPath();
				ctx.moveTo(200,200);
				ctx.lineTo(200,300);
				ctx.lineTo(300,300);
				ctx.closePath();
				ctx.stroke();
				
			}
		}
		
		
	</script>
</html>

lineCap

lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。
有3个可能的值，分别是：
butt :线段末端以方形结束。默认
round :线段末端以圆形结束加上去的
square:线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
默认值是 butt。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//querySelector身上有坑
			//拿到画布
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				ctx.strokeStyle="pink";
				ctx.lineWidth=10;
				ctx.lineCap="round";
				
				ctx.moveTo(100,100);
				ctx.lineTo(100,200);
				ctx.stroke();
				
			}
		}
		
		
	</script>
</html>

save

save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法

保存到栈中的绘制状态有下面部分组成：
	当前的变换矩阵。
	当前的剪切区域。
	当前的虚线列表.
	以下属性当前的值： strokeStyle, 
				 fillStyle,  
				 lineWidth, 
				 lineCap, 
				 lineJoin...

restore

restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。
如果没有保存状态，此方法不做任何改变。

使用canvas的模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			body{
				background: pink;
			}
			#test{
				background: gray;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300">
			<span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
		</canvas>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			/*
			1.路径容器
				每次调用路径api时,都会往路径容器里做登记
				调用beginPath时,清空整个路径容器
			2.样式容器
				每次调用样式api时,都会往样式容器里做登记
				调用save时候,将样式容器里的状态压入样式栈
				调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
			3.样式栈
				调用save时候,将样式容器里的状态压入样式栈
				调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖
			*/
			
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				ctx.save();
				//关于样式的设置
				//save  restore成对出现
				ctx.beginPath();
				//关于路径
				ctx.restore();
				
				
				ctx.save();
				//关于样式的设置
				ctx.beginPath();
				//关于路径
				
				ctx.restore();
			}
		}
		
		
	</script>
</html>