今回はCanvasで描画する図形を手書き風に変換してくれるプラグインの紹介します。
プログラムで描画する図形はだいたいパリっとした実践や塗り、もしくはグロー表現のいずれかが多いのでこういう手書き風の表現を使うと他との差別化になりそうですね。
用意するもの
必要なものはRough.jsからダウンロードしますが、描き1つだけあれば大丈夫です。
<script src="js/rough.min.js"></script>
基本的な使い方
これも日常的にCanvas使っている人ならすごく簡単です。まずはcanvasタグを用意します。
<canvas id="canvas" width="500" height="500"></canvas>
描画に関しては用意したタグを指定して、普通に図形の描画を行います。
//canvasタグを取得
var rc = rough.canvas(document.getElementById('canvas'));
//四角を描画。引数はx, y, width, height、オプションいろいろ。
rc.rectangle(10, 10, 200, 200, { fill: 'red' });
これだけで指定した通りのサイズで揺れのある手書き風の図形が描画されます。
もちろん資格だけじゃなく、circle、ellipse、lineなどお馴染みのものが揃っています。これらに関しては公式のリファレンスをご確認ください。
また、オプションで手書き感の「強弱」や「ゆがみ」なども指定出来るようです。
SVG Pathを用いて複雑な図形も描ける
下記のようにSVGのpath情報を転用して複雑な図形を描くことが出来ます。公式のサンプルではそれを利用してアメリカの地図を手書き風にして表示していますね。
//第一引数にpath情報、第二引数にオプション。
rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
パス情報があれば大分簡単に複雑な図形も描画出来るので、D3.jsや他のCanvas用いるプラグインなんかと併用すれば表現の幅が広がりそうですね！
パーティクル系のアニメーションに組み込んだりすると面白そうな気がします。
