Question

我正在使用HTML5画布实现免费绘图。目前每件事都很好。我正在为每个mousemove使用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();

Bezier曲线非常适合笔式（路径）功能，但我最终也得到了意想不到的结果，即P0和P2之间的曲线离P1太远......这可以通过添加额外的点来评估函数（将其提升到更高的程度，这似乎是adobe的工作方式）。

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

1。）应用滤镜 - 盒子或高斯 - 模糊会使粗糙边缘平滑一点，使其看起来不那么棱角。

2.。）应用Bezier曲线 - 在mousedown和mouseup事件之间，记录点阵列并应用曲线。线越长，重新渲染越慢。（Muro - deviantArt的画布应用程序似乎这样做了）。 [注意：如果想要创建一个艺术网络应用程序供人们使用，请向他们显示原始行，直到平滑渲染完成。]

我个人喜欢介于两者之间的某个地方。轻微的模糊往往会使东西变软，特别是在角落附近，并使得缓慢放置（因此频繁，较短的线条）更加柔和。）

我要添加的东西，这可能是完全明显的，所以我道歉：确保你将你的帽子样式设置为'圆形' - ctx.lineCap = 'round'

平滑Html5画布中的自由绘图

2 个答案: