Blog

Canvasの複数の図形をprototypeで同時に扱う

2016.01.25Cat:Canvas javascript デザイナー

JavaScriptのprototypeを利用すると、
同時に同様の図形を処理するような場合に、
メモリを節約した、効率的な処理を行うことができます。

この処理は、HTML5のCanvasを利用する際には、とても重要になりますので、
今回、prototypeを利用して、Canvas上で複数の図形を扱うプログラムを作ってみましたので、
ご紹介いたします。

今回作ってみたものは、Canvas上のなにもないところをクリックしたときに、その場所にサイズと色をランダムに設定した円を描画し、
円をドラッグした場合には、円を移動するというものです。

↓作ってみたもの

DEMO

方法

全体の処理

  1. Canvasの初期設定
  2. クリックした場所の取得
  3. クリックした場所に円があるかを判定 (prototypeのインスタンスのメソッドを利用)
  4. 円がなければクリックした場所に円を追加 (prototypeのインスタンスのメソッドを利用)
  5. 円があれば、円を移動 (prototypeのインスタンスのメソッドを利用)

prototypeのメソッド

  • 円の描画 (Canvasに変化(円の追加・移動)がある度に実行)
  • クリックした場所に円があるかを判定 (クリック時に実行)

円の描画とクリックしたときの円の当たり判定は、
同じ処理を繰り返し同時に処理を行う必要があるため、
prototypeとして用意しておき、
その他の全体に関わる処理や、インスタンスの操作はprototypeの外で処理するようにしました。

Canvasのコンテキスト、円の座標、半径、色をコンストラクタとして設定し、
Cavansへのそれぞれの円の描画の処理と、それぞれの円がクリックされたかどうかの判定をprototypeメソッドで設定しました。

円のインスタンスは配列にまとめて追加していくようにして、
配列に追加されたインスタンスを全て処理するという仕組みにしました。

ドラッグ時の円の移動は、必ず1つずつ行うので、インスタンスの外で処理しています。
ドラッグの処理で、ドラッグ前の状態や、ドラッグ中であることを保存しておく必要があるので、
Canvasの要素にdataというプロパティを追加して、処理を補助するようにしました。

参考図書

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで

参考サイト

タッチデバイスとマウスデバイスのイベント振り分け
[JS] タップイベントが実装されているのかを調べる方法(2つ)- YoheiM .NET

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ