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

현재 경로는 제 2 라인 연장 이다. 당신은 처음으로 초록을 쓰다듬습니다. 그리고 나서 당신은 길을 확장하고 길을 파랗게 치고 있습니다 (이제는 두 줄로 구성되어 있습니다). 분명히 녹색 선은 "덮어 씌어졌다".

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

에서 볼 수 있듯이