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. 2018-11-16

    第3回アウトドア部 ~秋めいてきましたねぇ~

    2018/10/27(土)、アウトドア部の3回目の活動!! 今回は釣り掘に釣りに行きましたよっ!🎣 …
  2. 2018-11-12

    あなたのお気に入りは? Build your own octocat で素敵な Octocat を作ろう!

    Octocat、 ご存知ですよね? こんにちは!江嵜です。 みなさん、 Octocat (オクトキ…
  3. 2018-11-7

    第1回 リーダーに興味がある人向け勉強会!!

    2018/11/4(日)に「リーダーに興味がある人向け勉強会」が開催されました! 勉強会の様子をお…
  4. 2018-11-6

    2018年10月度社員総会&懇親会@Tokyo 〜 全社員総会直前Special! 〜

    今期もあとわずか! 2018年10月19日(金)に、東京オフィスの2018年10月度の社員総会がお…
  5. 2018-11-5

    JavaScript にある NaN と Infinity という値、知ってますか?

    JavaScript のグローバルに定義された値 4 つ、全部知ってますか? こんにちは!江嵜です…
ページ上部へ戻る