javascript - HTML5 Canvas 笔触重叠

在这里，我创建了一个带有路径的线路径和笔触，但是我需要的笔触没有重叠：

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

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

一切都很好，但是如您所见，我看不到y笔触重叠

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

最佳答案

您可以绘制红色轮廓，粉红色填充，蓝色描边的折线，以显示每个线段中的重叠部分。



关键是单独绘制每个线段，而不是在单个路径中绘制它。同样，从最粗到最细绘制线条的红色，粉红色和蓝色部分。

这是示例代码和演示：

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>