Javascript 如何实现草图笔刷，如deviantART muro？

有一套绝妙的绘画工具。我很好奇如何在算术上实现这些画笔，比如素描和画笔

---

使用任何普通的编程语言解释都可以，不过我更喜欢C++或JavaScript。我认为这比阅读他们的JS源代码要好。

我认为它的工作原理如下：

• 跟踪鼠标移动
• 在捕捉到鼠标移动时，从保存的“旧鼠标位置”到捕捉到的“新鼠标位置”绘制所需的画笔，每次按像素距离迭代
• 如果您移动鼠标太快，脚本无法捕获，它将看起来就像一条计算出的长直线（这就是Muro正在做的事情）。如果你想得到真正的幻想，你可以从以前的鼠标位置计算轨迹，并绘制一条“更平滑”的线

由于指定了Javascript，您可能希望在

画布中绘制它

编辑1:

Sketch
似乎专门保存鼠标移动，然后循环，比如说每次鼠标移动最近的20次鼠标移动，并从该点到当前点绘制一条贝塞尔曲线

比如（伪代码）


编辑2:

我仔细观察了“草图”是如何工作的，它们似乎更新了鼠标指针的位置，将旧点移到了新点附近。大概是这样的：

我认为它的工作原理类似于：


跟踪鼠标移动
在捕捉到鼠标移动时，从保存的“旧鼠标位置”到捕捉到的“新鼠标位置”绘制所需的画笔，每次按像素距离迭代
如果您移动鼠标太快，脚本无法捕获，它将看起来就像一条计算出的长直线（这就是Muro正在做的事情）。如果你想得到真正的幻想，你可以从以前的鼠标位置计算轨迹，并绘制一条“更平滑”的线

由于指定了Javascript，您可能希望在
画布中绘制它

编辑1:

Sketch
似乎专门保存鼠标移动，然后循环，比如说每次鼠标移动最近的20次鼠标移动，并从该点到当前点绘制一条贝塞尔曲线

比如（伪代码）


编辑2:

我仔细观察了“草图”是如何工作的，它们似乎更新了鼠标指针的位置，将旧点移到了新点附近。大概是这样的：

谢谢，但这个答案对我来说太简单了。我需要一个真正的素描算法，而不仅仅是一种鼠标绘画的方式。我已经了解了素描是如何在muro中工作的，muro是一组beizer曲线。无论如何，谢谢你的关注。为
草图添加了描述。谢谢，但这个答案对我来说太简单了。我需要一个真正的素描算法，而不仅仅是一种鼠标绘画的方式。我已经了解了素描是如何在muro中工作的，muro是一组beizer曲线。无论如何，感谢您的关注。添加了
草图的描述。
Object mousemovements = [];
on.mousemove(event)
{
  if (mousemovements.length > 20)
  {
     mousemovements.removeLast();
  }
  mousemovements.insertAtBeginning([ event.mouseX, event.mouseY ]);
  for-each (movement in mousemovements)
  {
     drawBeziercurveFromTo(movement.mouseX, movement.mouseY, 
                           event.mouseX, event.mouseY);
  }
}