浅谈HTML5中canvas中的beginPath()和closePath()

最新推荐文章于 2024-01-10 00:00:00 发布

MingYoungLee

最新推荐文章于 2024-01-10 00:00:00 发布

阅读量4.3k

点赞数

分类专栏： canvas 文章标签： HTML5canvas画图beginPa beginPath与closePath HTML5Canvas

本文链接：https://blog.csdn.net/qq_37506861/article/details/77431883

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介：在HTML5中有一个很重要的阶段就是canvas，canvas中提供了大量的API，能使开发人员利用canvas绘制许多需要的图形，在canvas的绘制中有一个方法叫做beginPath()方法和closePath()方法，接下来详细介绍一下这两个方法，以及他们之间的联系

1、beginPath

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				border: 3px solid black;
				display: block;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="600" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		context.strokeStyle = "black";
		context.moveTo(0,0);
		context.lineTo(100,100);
		context.stroke();
		context.strokeStyle = "red";
		context.moveTo(0,20);
		context.lineTo(100,120);
		context.stroke();
	</script>
</html>

以上代码中按照平常的逻辑来说会产生两条线，1黑1红，但是结果并不是如此，结果是两条红线并且第一条红线比较粗，再看以下代码发现我们的逻辑并没有错误，但是为什么会产生这样的情况呢，原因在于：canvas利用画笔在绘制的时候，每次都是从beginPath()开始画的，如果在当前找不到beginPath()，就继续向上找，直到找到beginPath()为止，然后从beginPath()之后开始继续绘制。也就是说，第一条线我们画了两次，一次是黑色，另一次是黑色

1、不论你用moveTo()把画笔移动到哪里，只要不beginPath()，那你一直都是在画一条路径

2、fillRect与strokeRect,这种画出独立区域的函数，也不会打断当前的路径

说到beginPath()就不得不提到closePath()

3、两者之间有什么联系呢，答案是没有联系，closePath()只是闭合当前的路径，从起点到现在的这个点形成一个闭合的回路，但是，这并不意味着他之后的路径就是新路径了，不要企图通过closePath()来开始一条新的路径

4、开启一条全新路径的唯一方法就是使用beginPath()

MingYoungLee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈HTML5中canvas中的beginPath()和closePath()

简介：在HTML5中有一个很重要的阶段就是canvas，canvas中提供了大量的API，能使开发人员利用canvas绘制许多需要的图形，在canvas的绘制中有一个方法叫做beginPath()方法和closePath()方法，接下来详细介绍一下这两个方法，以及他们之间的联系1、beginPath&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&...
复制链接

扫一扫

专栏目录