PCに図形を手描きしてもらう
今回は、canvasやsvgの描画をまるで実際に手で描いたかのような味わいで表現できるRough.jsをご紹介します。
公式ページ:https://roughjs.com/
Github:https://github.com/pshihn/rough
まずはcanvasで描いてみる
まず、従来のcanvasでの描画はどのようなものなのか説明したいと思います。
以下のようなファイルを用意してください。名前は”canvas.html”にしておきましょう。
<!DOCTYPE>
<head>
</head>
<body>
<canvas id="test"></canvas>
<script>
let canvas = document.getElementById('test');
let context = canvas.getContext('2d');
context.fillStyle = "red";
context.fillRect(10, 10, 100, 100);
</script>
</body>
</html>
ファイルが作成できましたら、開いてみましょう。
このように赤い正方形が表示されたかと思います。
順を追って説明しますので、適宜上記のコードかファイルの中身を見ながら確認して下さい。
まずHTML上にcanvasタグを用意しておきます。
<canvas id="test"></canvas>
JavaScriptで指定しやすいようにidも指定しておきます。
指定したid通りにJavaScript内でcanvasのDOMを取得します
let canvas = document.getElementById('test');
取得したcanvasのDOMから2dオブジェクトを取得します。
let context = canvas.getContext('2d');
2dオブジェクトを何色で塗りつぶすか指定します。今回は”red”と色指定していますが、rgbやrgbaで指定することも出来ます。
context.fillStyle = "red";
最後に、どのような図形を描くか指定します。
context.fillRect(10, 10, 100, 100);
第一引数と第二引数は図形の起点のx座標とy座標を、第三引数と第四引数はx軸方向とy軸方向の長さを指定しています。
つまり今回は(10,10)の座標から始まる縦100px横100pxの図形を描いているわけです。
これでも「図形を描画する」という目的だけなら達せているのですが、ちょっと変化を出したかったり風合いを付けたかったりするときにお薦めしたいのがRough.jsです。ようやく本題です。
Rough.jsで描いてみる
Rough.jsを導入するには、HTMLに
<script src="https://rawgit.com/pshihn/rough/master/dist/rough.min.js"></script>
のタグを追加するか、もしくはサーバーサイドとして動いているJavaScript側で
npm install --save roughjs
とインストールするかの二種類があります。
今回は前者のCDNを用います。
Rough.jsの優秀な点の一つに、canvasやsvgのデフォルトの書き方とほぼ同じ書き方で描画できるということが挙げられる思います。ものによってはcanvasやsvgだけのコードよりも短くなったりもします。
上の”canvas.html”を以下のように書き換えてみましょう。
<!DOCTYPE>
<head>
<script src="https://rawgit.com/pshihn/rough/master/dist/rough.min.js"></script>
</head>
<body>
<div class="wrapper">
<canvas id="test"></canvas>
</div>
<script>
let roughCanvas = rough.canvas(document.getElementById('test'));
roughCanvas.rectangle(10, 10, 100, 100,{ fill: 'red' });
</script>
</body>
</html>
先ほどのcanvasの描き方と非常に近いと感じられたのではないでしょうか。同じく、(10,10)の座標から始まる縦100px横100pxの四角を描画しようとしています。
ファイルが完成したら開いてみましょう。
このように、先ほどの図形がまるで手で描いたかのように描画されるはずです。
また、ページを再読み込みしていただけると、図形が先ほどとは微妙に変化します。画面がレンダリングされるたびにRough.jsが動いているのが確認していただけるかと思います。
上のファイルのscriptタグ内の
roughCanvas.rectangle(10, 10, 100, 100,{ fill: 'red' });
の行に注目していただきたいのですが、今回は{ fill: ‘red’ }で「赤で塗りつぶす」というオプション指定しかしていませんが、他にも色々とオプションで変化を持たせることが出来ます。
例えば、roughnessというオプションでは描画の粗さを指定出来ます
roughCanvas.rectangle(10, 10, 100, 100,{ fill: 'red', roughness: 0.5});
では
のように表示されますが、
roughCanvas.rectangle(10, 10, 100, 100,{ fill: 'red', roughness: 5.5});
とroughnessの値を上げると、
のように表示されます。だいぶ粗々しいですね。とはいえここまで変化しても手描きっぽさをしっかり再現できています。
他にも、bowingというオプションでは辺のたわみも表現できたり、他にも色々なオプションがあります。
今回は便宜上canvasでの描画に則って説明しましたが、svgでも同じく描画することができます。
まとめ
実際に使って見て、想像していた以上に手描きっぽくなるので驚きました。
デザインのアクセントとして用いたら面白そうです。
