HTML5 캔버스 스트로크 중복 여기

Question

내가 경로 선 경로와 스트로크를 만들 수 있지만 내가 필요로하는 스트로크와 겹치는가 없습니다 :

CODE 및 DEMO : http://jsbin.com/yepigu/12/edit?output

ctx.strokeStyle='yellowgreen'; 
    drawPolyline(pts); 

모든 것은 괜찮지 만 보시 다시 피 스트로크 오버랩을 볼 수 없습니다.

스트로크와 겹쳐 보이도록이 예제를 어떻게 바꿀 수 있습니까?

Answer 1

각 선분에 겹침을 표시하는 빨간색으로 윤곽이 그려지고 분홍색으로 채워진 파란색 선이있는 폴리 라인을 그릴 수 있습니다.

키는 하나의 경로를 그리는 개별적 대신 각 선분을 그릴 수있다. 또한 가장 두껍고 가장 얇은 줄에서 빨간색의 분홍색 & 파란색 부분을 그립니다. 교차로가 중복을 만드는 대신 혼합 될 수 있도록 당신은 하나의 폴리 라인을 그리기하고

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var pts=[{x:50,y:50},{x:200,y:200},{x:50,y:200},{x:200,y:50}]; 
 

 
ctx.lineCap='round'; 
 
ctx.lineJoin='round'; 
 

 
drawPolyline(pts); 
 

 

 
function drawPolyline(pts){ 
 
    for(var i=1;i<pts.length;i++){ 
 
    // 
 
    ctx.lineWidth=25; 
 
    ctx.strokeStyle='red'; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(pts[i-1].x,pts[i-1].y); 
 
    ctx.lineTo(pts[i].x,pts[i].y); 
 
    ctx.stroke(); 
 
    // 
 
    ctx.lineWidth=22; 
 
    ctx.strokeStyle='pink'; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(pts[i-1].x,pts[i-1].y); 
 
    ctx.lineTo(pts[i].x,pts[i].y); 
 
    ctx.stroke(); 
 
    // 
 
    ctx.lineWidth=3; 
 
    ctx.strokeStyle='blue'; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(pts[i-1].x,pts[i-1].y); 
 
    ctx.lineTo(pts[i].x,pts[i].y); 
 
    ctx.stroke(); 
 
    } 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=600 height=600></canvas>