HTML5画布笔划重叠

Question

这里我用路径创建一个行路径和笔划，但是我没有与笔划重叠：

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

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

一切都很好，但正如你所看到的，我看不出中风重叠

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

Answer 1

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

关键是分别绘制每个线段而不是在单个路径中绘制它。另外，绘制红色，粉红色和＆amp;从最厚到最薄的线的蓝色部分。

这是示例代码和演示：

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>