剪輯奇怪的行爲？

Question

以下內容會創建一個意外的剪輯路徑。是因爲從一弧的末端到下一弧的起點的移動？圓圈竟然是橢圓形，這也是出乎意料的。

var canvas3=document.getElementById("drawing3"); 
var ct=canvas3.getContext("2d"); 

ct.beginPath(); 
ct.arc(50,80,30,0,Math.PI*2,false); 
ct.arc(120,40,60,0,Math.PI*2,true); 
ct.arc(180,40,30,0,Math.PI*2,true); 
ct.arc(240,40,30,0,Math.PI*2,true); 
ct.clip(); 

ct.fillStyle="yellow"; 
ct.fillRect(10,10,400,200); 
ct.fillStyle="magenta"; 
ct.font = "40px sans-serif"; 
ct.fillText("what's this?",30,70); 

順便說一句，剪輯區域總是必須以beginPath（）開頭嗎？

Answer 1

爲什麼省略號代替弧線

雖然您不包括你的CSS，當畫布元素與CSS調整畫布圖紙變形。 HTML5畫布的默認大小爲300x150，因此使用CSS調整其大小會拉伸或擠壓後續圖形，除非CSS將畫布的大小調整爲與原始2：1比例完全相同。

所以，如果你要調整畫布通過直接更改元素的大小做調整大小：

var canvas3=document.getElementById("drawing3"); 
canvas3.width=400; 
canvas3.height=300; 

爲什麼beginPath是有用

一個context.clip總是在行爲（必需！）最後一組路徑命令和一組路徑命令應該以context.beginPath開始。所以是的，一個剪輯應該始終以context.beginPath開頭。

爲什麼beginPath有用（始終使用它）：如果在不用beginPath啓動每個集合的情況下發出多組路徑命令，那麼每個新集合也將執行所有先前的集合。你的道路將變成一個長的繪圖而不是具有不同的繪圖。

固定的相互連接的圓

context.arc是帆布路徑繪製命令。

路徑命令將始終連接（用直線）在context.beginPath和context.stroke or context.fill之間發生的所有圖形。

但是您可以使用context.moveTo命令路徑「拾取鉛筆並將其移動到下一個圓心」。這會阻止你的圈子互相連接。

// pick up the pencil and move it to the next arc's centerpoint 
ct.moveTo(x,y); 
// and draw the arc around the centerpoint 
ct.arc(x,y,r,0,Math.PI*2,false); 

這裏是你的代碼重構爲 「拿起鉛筆」 弧之間：

var canvas3=document.getElementById("drawing3"); 
 
var ct=canvas3.getContext("2d"); 
 

 
ct.beginPath(); 
 
arcAtXY(50,80,30); 
 
arcAtXY(120,40,60); 
 
arcAtXY(180,40,30); 
 
arcAtXY(240,40,30); 
 
ct.clip(); 
 

 
ct.fillStyle="yellow"; 
 
ct.fillRect(10,10,400,200); 
 
ct.fillStyle="magenta"; 
 
ct.font = "40px sans-serif"; 
 
ct.fillText("what's this?",30,70); 
 

 
function arcAtXY(x,y,r){ 
 
    ct.moveTo(x,y); 
 
    ct.arc(x,y,r,0,Math.PI*2,false); 
 
}

canvas{border:1px solid red;}

<canvas id="drawing3" width=300 height=300></canvas>

另外一個思想不直接關係到你設計

如果你想要中風圓而不是填充他們，你會移動到下一個圓的周長而不是它的中心點。移動到中心點將導致自動線從中心點繪製到邊界。

function arcAtXY(x,y,r){ 
    ct.moveTo(x+r,y); 
    ct.arc(x,y,r,0,Math.PI*2,false); 
}