canvas绘制路径之 beginPath() 和 closePath()

查看专栏目录

canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

常用的绘制路径方法

beginPath(): 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath(): 闭合路径,用于将当前路径的起点和终点连接起来，形成一个封闭的路径。
stroke(): 通过线条来绘制图形轮廓。
fill(): 通过填充路径的内容区域生成实心的图形。
moveTo(x, y): 将起点移动到指定的坐标 x 以及 y 上(默认是在(0, 0))。
lineTo(x, y): 绘制一条从当前位置到指定 x 以及 y 位置的直线(通常结合moveTo(x, y)使用,先设置起点在划线)。
arc(): 绘制圆弧或者圆.
quadraticCurveTo(): 绘制二次贝塞尔曲线
bezierCurveTo(): 绘制三次贝塞尔曲线

绘制路径的步骤

• 首先，需要创建路径起始点。
• 然后使用画图方法去画出路径
• 把路径封闭。
• 一旦路径生成，就可以通过描边或填充路径区域来渲染图形。

在这篇文章中，我们着重关注beginPath() 和 closePath()

beginPath()

通过清空子路径列表开始一个新路径的方法。 当我们想创建一个新的路径时，调用此方法。 如果不调用beginPath, 再渲染上就会继承之前的路径，造成错误。

怪异效果图

示例源代码（共103行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-09
*/
<template>
	<div class="djs_container">
		<div class="top">
			<h3>canvas不添加beginPath的怪异现象</h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
			<h4>
				<el-button type="primary" size="mini" @click="draw1()">不调用beginPath</el-button>
				<el-button type="primary" size="mini" @click="draw2()">调用beginPath</el-button>
				<el-button type="danger" size="mini" @click="clearCanvas()">清理画布</el-button>
			</h4>
		</div>
		<div class="dajianshi ">
			<canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				ctx: null,
				canvas: null,
			}
		},
		mounted() {
			this.setCanvas()
		},
		methods: {
			clearCanvas(){
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
			},
						
			setCanvas() {
				this.canvas = document.getElementById('dajianshi');
				if (!this.canvas.getContext) return;
				this.ctx = this.canvas.getContext("2d");
				this.ctx.lineWidth=10;
			},
			draw1() {			
			 this.ctx.moveTo(100,10);
			 this.ctx.lineTo(100,400);
			 this.ctx.strokeStyle = "black";
			 this.ctx.stroke();
			 
			 this.ctx.moveTo(120,10);
			 this.ctx.lineTo(120,400);
			 this.ctx.strokeStyle = "red";
			 this.ctx.stroke();
			},
			
			draw2() {			  					
			 this.ctx.beginPath();			 
			 this.ctx.moveTo(500,10);
			 this.ctx.lineTo(500,400);
			 this.ctx.strokeStyle = "black";
			 this.ctx.stroke();
			 
			 this.ctx.beginPath();
			 this.ctx.moveTo(520,10);
			 this.ctx.lineTo(520,400);
			 this.ctx.strokeStyle = "orange";
			 this.ctx.stroke();
			},

		}
	}
</script>

<style scoped>
	.djs_container {
		width: 1000px;
		height: 680px;
		margin: 50px auto;
		border: 1px solid #994170;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: #994170;
		color: #fff;
	}

	.dajianshi {
		margin: 5px auto 0;
		border: 1px solid #ccc;
		width: 980px;
		height: 490px;
		background-color: #f9f9f9;
	}
</style>

怪异分析

上述示例中， draw1()中没有调用beginPath。

1. 开始时候，点击draw1()， 出现两条红线，因为他们在一个路径中，上面的black颜色被红色所替代。
2. 后来点击 draw2(), 因为启用了beginPath, 与之前做了切分，不在同一个路径中。分别的渲染颜色起到了效果。
3. 最后再点击draw1()， draw2的后面一条线路径同draw1的路径是同一个，颜色就被draw1的最后的红色所替代，形成3条路径。

closePath()

在绘制路径时，通常我们会使用 moveTo() 方法将画笔移动到起始点，然后使用其他绘图方法（如 lineTo()、arcTo() 等）定义路径的形状和轮廓。当我们想要将路径闭合时，我们可以使用 closePath() 方法。

示例：

ctx.beginPath();
ctx.moveTo(20, 70);
ctx.lineTo(20, 100);
ctx.lineTo(80, 100);
ctx.closePath();
ctx.stroke();

使用了 closePath() 方法的路径是封闭的，起点和终点通过一条直线连接。我们调用了 closePath() 方法来将路径封闭，所以画笔会自动将终点与起点连接起来，形成一个封闭的路径。

closePath()的使用场景

是否需要使用 closePath() 方法取决于我们希望绘制的图形是否需要封闭。

• 如果绘制的图形是封闭的，比如一个闭合的多边形或封闭曲线，那么使用 closePath() 方法可以确保路径的起点和终点连接起来，形成一个封闭的路径。这样，在调用 fill() 方法时，填充颜色会被应用到整个封闭区域内。
• 如果绘制的图形已经是封闭的，或者使用的绘图方法已经自动将路径封闭（例如使用 arc() 方法绘制圆），则不必显式调用

closePath() 方法的作用仅限于路径的封闭，不会直接影响 fill() 或 stroke() 方法的结果。它只是确保路径是封闭的，从而在填充或描边时产生预期的效果。
closePath()只是闭合当前的路径，从起点到现在的这个点形成一个闭合的回路，但是，这并不意味着他之后的路径就是新路径了，不要企图通过closePath()来开始一条新的路径.

canvas基本属性

属性	属性	属性
canvas	fillStyle	filter
font	globalAlpha	globalCompositeOperation
height	lineCap	lineDashOffset
lineJoin	lineWidth	miterLimit
shadowBlur	shadowColor	shadowOffsetX
shadowOffsetY	strokeStyle	textAlign
textBaseline	width

canvas基础方法

方法	方法	方法
arc()	arcTo()	addColorStop()
beginPath()	bezierCurveTo()	clearRect()
clip()	close()	closePath()
createImageData()	createLinearGradient()	createPattern()
createRadialGradient()	drawFocusIfNeeded()	drawImage()
ellipse()	fill()	fillRect()
fillText()	getImageData()	getLineDash()
isPointInPath()	isPointInStroke()	lineTo()
measureText()	moveTo()	putImageData()
quadraticCurveTo()	rect()	restore()
rotate()	save()	scale()
setLineDash()	setTransform()	stroke()
strokeRect()	strokeText()	transform()
translate()