绘制一系列线条不服从lineJoin ='round'

Question

我有一个绘图应用程序。我在画布上跟踪绘图，然后使用类似的东西进行渲染：

canvas.moveTo(x[0]-1, y[0]);
for(var i=0;i<x.length;i++)
{
  canvas.lineTo(x[i], y[i]);
  canvas.moveTo(x[i], y[i]);
}

通过这种方式，鼠标的“笔划”会导致按照您使用鼠标访问画布的位置顺序绘制一系列线条。

然而，这不是正确的。它看起来波涛汹涌，绝对不是“圆”，因为我有lineJoin设置。我可以通过在循环中的每个moveTo创建一个闭合，描边和创建一个新路径来解决这个问题。然而，这非常缓慢。

为什么我的线条会以一种非常块状和怪异的方式结束？

Answer 1

因为每一行都在moveTo“继续”，所以这些行永远不会真正“加入”。这一切都被认为是一条大线。使此渲染顺利进行的解决方案是将画布上下文的lineCap属性设置为“round”。

虽然出于某种原因仍然不尽相同，但是可以看到角落周围的一些“不稳定”，但并不像以前那样非常明显