HTML 5畫布風格泄漏

Question

下面的URL中有一個很小的示例，繪製兩行。我期望頂線是綠色，底部是藍色。但他們都是藍色的。爲什麼？

http://jsfiddle.net/rj8Ab/

編輯添加下面的腳本，以及：

var canvas = document.getElementById('canvas'); 
canvas.width = 500; 
canvas.height = 500; 

var ctx = canvas.getContext('2d'); 

ctx.globalAlpha = 1; 
ctx.globalCompositeOperation = "source-over"; 

var x1=10, y1=10, width=100, height=100; 

ctx.lineWidth = "5"; 

//draw green line 
ctx.strokeStyle = "#00FF00"; 
ctx.moveTo(x1 + 1, y1 + 1); 
ctx.lineTo(x1 + width - 2, y1 + 1); 
ctx.stroke(); 

//draw blue line 
ctx.strokeStyle = "#0000FF"; 
ctx.moveTo(x1 + 1, y1 + 10); 
ctx.lineTo(x1 + width - 2, y1 + 10); 
ctx.stroke(); 

Answer 1

你，如果你想這樣開始一個新的路徑 - .stroke沒有自動做到這一點：http://jsfiddle.net/rj8Ab/2/。

//draw blue line 
ctx.beginPath(); 

目前的路徑是擴展與所述第二線，因此新路徑包括兩行。你首先撫摸着最上面的一條綠色線路，之後你將擴展​​路徑並撫摸藍色路徑（現在由兩條線組成）。綠線顯然已被「覆蓋」。

Answer 2

第一個欄被繪製爲綠色，但它隨後被更改爲藍色。

由於看到www.williammalone.com

//draw green line 
ctx.beginPath(); 
ctx.moveTo(x1 + 1, y1 + 1); 
ctx.lineTo(x1 + width - 2, y1 + 1); 
ctx.closePath(); 
ctx.strokeStyle = "#00FF00"; 
ctx.stroke(); 
//draw blue line 
ctx.beginPath(); 
ctx.moveTo(x1 + 1, y1 + 10); 
ctx.lineTo(x1 + width - 2, y1 + 10); 
ctx.closePath(); 
ctx.strokeStyle = "#0000FF"; 
ctx.stroke();