HTML5 холст мазок перекрывание

Question

Здесь я создаю стартовый путь и ход с пути, но не перекрывается с инсультом, который мне нужно:

КОД и 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>