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

时间 2020-01-22

标签 canvas beginpath closepath 使用繁體版

原文原文链接

1、什么状况下要用canvas

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

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

2、代码详解ip

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

<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();

			}

效果图：io

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

（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>