在画布上模拟手绘的过程

Question

是否有一种JavaScript库可以模拟画布元素，但不是创建直线，而是创建看起来像“手绘”的“自由形式”线条？

如果存在这样的库，那将非常酷，而且似乎应该已经有人做过了。如果有涉及此类技术的文章，我会很感兴趣，因为这样我就可以尝试自己实现这个库。

- Dennkster

---

我不太确定一个库具体可以处理什么内容，但我曾经创建过一个非常简单的版本，跟你描述的有些类似：http://pimvdb.github.com/。 - pimvdb

@pim 我认为这不是他的意思：他似乎想要一个可以编程地从一个坐标对绘制一条线到另一个坐标对，并使其看起来像手绘的库。 - Pekka

这个有更新吗？自三年前以来有新的库吗？ - B M

Answer 1

根据您提到的文章：一款卡通风格的JS绘图库，支持SVG和HTML5 Canvas。它可以作为Raphael.js、D3.js或者SVG.js的插件，也可以作为Canvas的库来使用。它被称为comic.js，可以在github上找到。

这是它能够生成的内容：

- B M

Answer 2

我记得几年前读到过有关这方面的文章。顺便说一下，那篇文章是使用canvas上的javascript实现的。基本思想是使用类似Bresenham线绘制算法的方式逐像素手动绘制线条，但修改它以添加一些随机偏差/扰动。

我不确定当时我读的是否是这个页面，但这就是今天谷歌搜索出来的内容：http://29a.ch/2010/2/10/hand-drawn-lines-algorithm-javascript-canvas-html5

- slebetman

---

这正是我在寻找的，质量似乎比我期望的要差一些，但它朝着正确的方向发展 :) - Dennkster