javascript - 绘制一系列线条不服从 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我可以通过在循环中的每个处创建闭合、抚摸和创建新路径来解决此问题。然而，这非常慢。

为什么我的线条最终以非常块状和奇怪的方式绘制？

score 0 · Accepted Answer

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

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

1 回答 1