Simulation der Handzeichnung auf Leinwand simulieren

Question

Gibt es eine JavaScript-Bibliothek, die das Canvas-Element simuliert, aber anstatt gerade Linien zu erstellen, sehen die erstellten Zeilen "freie Form" oder "Hand gezeichnet" aus?

Dies wäre sehr cool, wenn es existieren würde und es scheint, als hätte jemand es bereits tun sollen. Auch wenn es Artikel über die Mathematik gibt, wäre ich interessiert, weil ich versuchen könnte, diese Bibliothek selbst zu implementieren.

Answer 1

Ich erinnere mich, dass ich vor ein paar Jahren etwas darüber gelesen habe. Im Übrigen tat dieser Artikel dies in JavaScript auf Leinwand. Die Idee war im Grunde genommen, die Linien selbst Pixel-by-Pixel mit etwas wie Bresenhams Linienzeichnungsalgorithmus zu zeichnen, es jedoch so modifizieren, dass einige zufällige Abweichungen/Pertubationen in der Zeile hinzugefügt werden.

Ich bin mir nicht sicher, ob dies die Seite war, die ich damals gelesen habe, aber das hat Google heute erzählt: http://29a.ch/2010/2/10/hand-drawn-lines-algorithm-javascript-canvas-html5

Answer 2

Basierend auf Artikel Sie erwähnen, ich habe eine JS -Zeichnungsbibliothek im Cartoon -Stil für SVG und HTML5 -Leinwand erstellt. Es funktioniert als Plugin für Raphael.js, D3.js oder SVG.js oder als lib für Canvas. Es wird genannt comic.js und kann gefunden werden Github.

Das kann es produzieren: