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

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 属性设置为“圆形”。

尽管出于某种原因，这仍然不完全相同，并且在拐角处可以看到一些“断断续续”，但不像以前那样非常明显