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-4-17

    第8回 麻雀部活動記録~まるで個室のような雀卓で~

    3月末の桜が満開な季節に恒例の麻雀部を開催してきました! 例によって活動記録を書いていこうと思いま…
  2. 2019-4-15

    JetBrains の IDE に新色登場! IntelliJ でも PhpStorm でも新しい色を体験しよう!

    JetBrains の IDE に新しいテーマが作られていました! こんにちは、江嵜です。 みな…
  3. 2019-4-8

    やっぱり JavaScript (TypeScript) でも アノテーション (Decorator) 使いたい!

    JavaScript でもアノテーションしたい! こんにちは、江嵜です。 JavaScript …
  4. 2019-4-3

    2019年03月度社員総会&懇親会@Tokyo☆

    2019年3月15日(金)に、エージェントグロー東京オフィスの社員総会&懇親会が開催されまし…
  5. 2019-4-2

    第2回 倶楽部ぽじてぃぶ ~ボードゲーム~

    2019年2月23日に、第2回となる倶楽部ぽじてぃぶの活動が開催されました! 今回は、その様子をお…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式」は、株式会社エージェントグローが日本国内において出願中の商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。