HTML5 の canvas 使ってますか？

こんにちは！
江嵜です。

みなさん、html5 の canvas 使ってますか？
canvas は html の文章構造に縛られることなく自由に画面上に様々なものを表示出来るため、
おしゃれなページのバックグラウンドに使ったり、お絵描きアプリを実装してしてみたりと、とても便利な要素です。

なのですが、何もライブラリを使わずに canvas を操作しようと思うと結構面倒でして…
例えば円を描画しようと思うとこんな感じ
(html に “canvas” id を付与した canvas 要素が必要です)

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.stroke();

一つ円を書くだけであればよいのですが、少し変化させるたびに canvas をすべて書き直して更新する必要があったり、
更新を手動で書いてあげないといけなかったり、
インタラクティブなんて考えだすともう大変！

ということでライブラリに頼るわけですが、
意外と canvas 関連はちょうど良いライブラリがあまり見つからず…

ゲーム用として開発されているものが多く WebGL だ！音楽も制御だ！と、求めている以上の機能が搭載されているものが多いんですね。

そんな中で、シンプルに、必要十分な機能を提供してくれているライブラリを見つけましたので、ご紹介いたします。

Konva.js のシンプルに要求に答えてくれる感が素晴らしい！

それが Konva.js です！

詳しいコードは公式ドキュメントにお任せして、同じように円を描画するには

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();

var circle = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  stroke: 'black',
  strokeWidth: 1
});

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);

こんな感じですね。

「さっきよりコード量増えてんじゃん」と思われるかもしれませんが、 Konva のいいところはここから。

例えば、先ほどのコードの Konva.Circle に渡すパラメーターの中に draggable: true と書くだけで、
円をドラッグできるようになります！
同じことを canvas でやろうとしたら、マウスが押されたことを認識させて、マウスが動いたのと同じ距離だけ…という処理を書かなければなりませんが、 Konva ならたったこれだけ。
なんともシンプルにやりたいことを実現させてくれますね。

その他にもアニメーションや切り取りなど、 canvas を使っていてやりたいと思うことは大抵できてしまう優れものなんですね。

ドキュメントが結構充実している

Konva の良いところはもう一点、「ドキュメントが充実している」という点です。

こちらにあるような単純なライブラリの使い方は当然ですが、デモページも結構充実の内容で作られているのですね！

例えばこちらのページのように、インタラクティブな表現を Konva ではどう作っていくのかといった内容など、参考になる資料がたくさんあるのがポイントです。

描画系の処理は普段のプログラミングよりも数学的な考え方が求められることが多いので難しくなりがちですが、
このサンプルを参照することでやりたいことを実現するのがググっと楽になりますよ！

React, Vue にも対応！

今のご時世、Web プログラミングをする際には何かしらのフレームワークを使われることがほとんどかと思います。

Konva は今のホットなフレームワーク二つ、React と Vue をサポートし、
これらのフレームワークとうまくつながるように拡張することができます！

私は Vue が大好きなので Vue との接続を少し試してみましたが、
簡単な描画だけであれば Vue でテンプレートを書くだけであっさりと実現できてしまうほどの簡単っぷりでした。

この 2 フレームワークを使用されている方は、拡張も使ってみてくださいね。

canvas 使うなら Konva を一度試してみて！

Konva いかがでしょうか。
とりあえず今は canvas を使う予定が無いという方も、将来必要となるときために是非覚えておいていただきたいライブラリです。
その有能さにきっと驚かれ、また canvas 周りの開発がのスピードが段違いに向上することでしょう！