canvas中beginPath()与closePath()的使用

最新推荐文章于 2023-10-18 19:27:59 发布

weixin_33883178

最新推荐文章于 2023-10-18 19:27:59 发布

阅读量591

点赞数 1

文章标签： python

原文链接：https://my.oschina.net/u/3038594/blog/813280

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、什么情况下要用

beginPath()：开始一个新的路径，画布中你需要创建一块新的区域，且布局画风与之前不同。这时你就需要用到beginPath()，让她为你打开新世界的大门了。

closePath()：不要被名字所困扰，他和前面的beginPath一毛钱的关系都没有，并不是一对。closePath()是对当前区域进行连接封闭的操作。如果说他的区域本来就是密封的，那么这个方法就失去了他的意义。

二、代码详解

基础代码，下面的解释都是针对这里的东西在讲的

	<body>
		<canvas id="mycanvas" width="500" height="500"></canvas>
	</body>
    <script>
			window.onload = function() {
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
	
                ctx.beginPath();
				ctx.lineWidth = "5";
				ctx.strokeStyle = "red"; // 红色路径
				ctx.moveTo(0, 75);
				ctx.lineTo(250, 75);
				ctx.lineTo(250, 100);
				ctx.closePath();
				ctx.stroke(); // 进行绘制

				ctx.beginPath();
				ctx.strokeStyle = "blue"; // 蓝色路径
				ctx.moveTo(50, 0);
				ctx.lineTo(155, 200);
				ctx.lineTo(135, 200);
				ctx.stroke();

			}

效果图：

（1）如果把下面的 ctx.beginPath()注销掉，那么他就不会实现上面的红色内容。作为一个完整的区域，按照程序的执行，红色会被下面的蓝色所覆盖。

（2）closePath()：两组图线，上面的加了closePath(),形成了封闭的图形，下面的没有加，我们可以看见它未形成封闭的图线。如果本来图线就是封闭的，那么他就没有效果了。如下：

window.onload = function() {         
					var c = document.getElementById("mycanvas");         
					var context = c.getContext("2d");         
					context.beginPath();         
					context.arc(40, 40, 40, 0, 2 * Math.PI);  
					context.closePath();       
					context.stroke();

（3）如果之前都是不连接的区域，再加上 closePath()。就近形成密封的区域。如下：

	<script>
			window.onload = function() {
				var c = document.getElementById("mycanvas");
				var ctx = c.getContext("2d");
				ctx.beginPath();
				ctx.lineWidth = "5";
				ctx.strokeStyle = "red"; // 红色路径
				ctx.moveTo(0, 75);
				ctx.lineTo(250, 75);
				ctx.lineTo(250, 100);
			//	ctx.closePath();
				ctx.stroke(); 

			//	ctx.beginPath();
				ctx.strokeStyle = "blue"; // 蓝色路径
				ctx.moveTo(50, 0);
				ctx.lineTo(155, 200);
				ctx.lineTo(135, 200);
				ctx.closePath();
				ctx.stroke();

			}
		</script>