Html 如何排队？

我需要画一条曲线/形状，在这段时间内改变它的宽度。所以我需要一次画每一条线，改变每一块的宽度。但这样做，会在两条线之间引入一个间隙

此处为具有单个beginPath/stroke（线自动连接）的图形：

取而代之的是形状每个部分的beginPath/stroke（在这里，我可以在修复此问题后更改每条线的宽度）：

正如您在上一个示例中所看到的，这两条线之间有一个间隙。

---

如何修复它？

您可以更改大写的渲染方式：

ctx.lineCap = "round";

这将用“半”圆延伸线段，从而允许更平滑的重叠

---

为什么不能像这样移动到其他点：。它不是泛型的，但它确实起作用。ctx.moveTo（48,49）；代替50，50你让我开心！非常感谢你！对于我所需要的（只是连接的线条），它是完美的；）@大多数情况下，您可以通过f.ex单独处理第一段和最后一段。插值长度50%，绘制带圆帽的内部零件，外部零件不带圆帽。

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();

ctx.lineCap = "round";