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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。