帆布對象：JavaScript中的半圓漏色

Question

嗨，我想了解帆布的打開和關閉功能的要領。 我注意到的是當我只用一個開放和關閉功能的畫布爲2個獨立的對象一個矩形和一個半圓。顏色開始泄漏，如圖所示：

我想到的是如下圖2.一個開閉帆布功能：

的代碼如下

提到

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.rect(30, 30, 50, 60); 
ctx.fillStyle = "#FF0000"; 
ctx.fill(); 
ctx.closePath(); 

ctx.beginPath(); 
ctx.arc(350,200,20,0,Math.PI*2,false); 
ctx.fillStyle = "green"; 
ctx.fill(); 



ctx.closePath(); 

Answer 1

函數ctx.beginPath通過刪除所有現有路徑來創建新的路徑對象點和中風

如果隨後ctx.beginPath

該函數的功能ctx.closePath創建從添加到當前路徑以前ctx.moveTo或ctx.beginPath是無關的ctx.beginPath功能和什麼也不做最後的點線ctx.closePath是同樣如下面ctx.lineTo

ctx.beginPath(); 
ctx.moveTo(100,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.lineTo(100,100); // back to start 

同

ctx.beginPath(); 
ctx.moveTo(100,100); 
ctx.lineTo(200,200); 
ctx.lineTo(100,200); 
ctx.closePath(); // does the same as ctx.lineTo(100,100); // back to start 

代碼中的一些註釋。

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.rect(30, 30, 50, 60); 
ctx.fillStyle = "#FF0000"; 
ctx.fill(); 
ctx.closePath(); // <<< Not needed as you have already called fill 

ctx.beginPath(); // <<< this deletes the previous path 
ctx.arc(350,200,20,0,Math.PI*2,false); 
ctx.fillStyle = "green"; 
ctx.fill(); 

ctx.closePath(); // <<< not needed