html - 如何加入线？

Question

我需要绘制一条曲线/形状，它会随时间改变其宽度。所以我需要一次画出每一行，改变每个 block 的宽度。但这样做会在线条之间引入间隙。

这里是example使用单个 beginPath/stroke(自动连接线):

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath
ctx.strokeStyle='#cc0000';
ctx.lineWidth=10;
ctx.moveTo(10,10);
ctx.lineTo(50,50);
ctx.lineTo(100,60);
ctx.stroke();

和here而不是形状的每个部分的 beginPath/stroke(一旦我解决了这个问题，我可以改变每条线的宽度):

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath;
ctx.strokeStyle='#cc0000';
ctx.lineWidth=10;
ctx.moveTo(10,10);
ctx.lineTo(50,50);
ctx.stroke();
ctx.beginPath;
ctx.strokeStyle='#cc0000';
ctx.lineWidth=10;
ctx.moveTo(50,50);
ctx.lineTo(100,60);
ctx.stroke();

正如您在上一个示例中看到的，两条线之间有一个间隙。我该如何解决？

Answer 1

您可以更改大写字母的呈现方式:

ctx.lineCap = "round";

这会将线段延伸“半”个圆，从而实现更平滑的重叠。

Fiddle