pix2pixとかで手書きの絵を作りたいとかQuickDrawとかの手書きの絵を用意したいってときのために簡単に描けるHTMLとJavaScriptを用意する.
Fabric.jsというJSライブラリを用意すればすぐに実現することができる.
以下に本当に最小限のhtmlとjavascriptを用意したので、ほぼコピペでやりたいことできるはず.
こんな感じ.
Fabric.jsを用いてfreeDrawingBrushを設定するだけで上記の形を実現できる.
http://fabricjs.com/freedrawing
上記のサイトでもう少し他のオプションを使ったデモを見ることができる.
他のオプションには、
- 影をつける
- 色を変える
- 影の幅を変える
- ブラシの種類を変える
等簡単にできる.
もし書いた絵を保存したいとか取り出したいってことがあれば,以下のように記述すればいい.
var image = canvas.toDataURL(“image/png”).replace(“image/png”, “image/octet-stream”);
window.location.href=image; // it will save locally
