html - 在 Html5 画布中平滑自由绘图

Question

我正在使用 HTML5 画布实现免费绘图。目前一切正常。我为每个鼠标移动使用 moveTo() 和 lineTo()。我必须微调绘图；

当我画一些曲线，如快速移动的线条时，绘图会像直线的关节一样被绘制。有没有其他的绘图方法，使绘图更流畅？

Answer 1

我认为绘图本身没有更好的方法，但是，如果您将绘图功能直接放在鼠标移动事件处理程序上，那么它会减慢速度，

为了加快速度，您可以将坐标保存在事件处理程序中的数组中，然后等待鼠标停止移动，然后再穿过数组并绘图。

优点是可以更快速地调用事件，使曲线更平滑，缺点是如果您移动鼠标很多，则会出现“滞后”。

另一种方法是尝试检测用户何时弯曲并使用适当的曲线绘制方法。

Answer 2

我实际上做了同样的事情：

ctx.beginPath();
ctx.moveTo(lp.x-.5, lp.y-.5); // Last recorded position.
ctx.lineTo(cp.x-.5, cp.y-.5); // Current position at time of call.
ctx.stroke();

贝塞尔曲线非常适合笔状（路径）功能，但我也得到了意想不到的结果，即 P0 和 P2 之间的曲线距离 P1 太远......这可以通过添加额外点来处理评估函数的依据（将其提升到更高的程度，这似乎是 adobe 的做法）。

我花了两天时间回答这个问题，对最佳示例进行了大量研究，并在可用的情况下撕毁了代码。基本上有两种反应：

1.) 应用过滤器——方框或高斯模糊会使粗糙的边缘稍微平滑一点，使其看起来不那么棱角分明。

2.) 应用贝塞尔曲线 – 在mousedown和mouseup事件之间，记录点数组并应用曲线。线越长，重新渲染的速度就越慢。（Muro - deviantArt 的画布应用程序似乎可以做到这一点）。[注意：如果你的想法是创建一个艺术网络应用程序供人们使用，请向他们展示原始线条，直到完成平滑渲染。]

我个人喜欢介于两者之间。轻微的模糊倾向于柔化事物，尤其是靠近角落的东西，并使缓慢放置（因此频繁，较短的线条）更加柔和）。

我要补充一点，这可能是完全显而易见的，所以我很抱歉：确保您已将帽子样式设置为“圆形”--ctx.lineCap = 'round'