JS で Canvas を操作するときは Konva が結構便利に使えます!

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 周りの開発がのスピードが段違いに向上することでしょう!

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-1-23

    2019年1月度・第30回 福岡社員総会&懇親会

    今年初の社員総会! 2019年、明けましておめでとうございます。 前回の福岡社員総会をレポートさ…
  2. 2019-1-22

    第17回社員総会&懇親会@Osaka 〜年明け一発目!〜

    2019年1月11日(金)、大阪社員総会&懇親会が開催されました! その様子をお届けします! 社員…
  3. 2019-1-21

    GitHub の Pull Request はマージ方法が 3 パターンあるって知ってました?

    こんにちは、江嵜です。 GitHub の Pull Request つかってますか? みなさん、…
  4. 2019-1-14

    目を酷使するお仕事だから…個人的に使い続けている、目をいたわるアイテム BEST 3

    目を労わってますか? こんにちは、江嵜です。 みなさん、目を労わってますか? 昔は「テレビ見す…
  5. 2019-1-11

    2018年12月度社員総会&懇親会@Tokyo ~たくさんのポーズいただきました!~

    第4期が始まりました! 2018年12月21日(金)に東京オフィスの「12月度 社員総会&…
ページ上部へ戻る