javascript - HTML5 Canvas 描边重叠

Question

这里我创建了一个线条路径和带有路径的笔划，但是与我需要的笔划没有重叠:

代码和演示:http://jsbin.com/yepigu/12/edit?output

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

一切都很好，但正如你所看到的，我看不到 y 笔划重叠

如何更改此示例以显示与笔划的重叠？

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>