HTML+JavaScriptだけでブラウザに図形描画(3) - Canvas API -
TIPS 032:マウスポインタの座標に応じて図形を描画する
マウスイベントやタッチイベントを利用することで、ユーザーの操作に応じてキャンバスを操作することもできます。以下は、マウスポインタの動きに応じてキャンバス上に曲線を描く、簡易な落書き帳アプリの例です。
[リスト05]マウスポインタの動きに応じて曲線を描画するコード(pointer.html)
window.addEventListener('DOMContentLoaded', function() { if (HTMLCanvasElement) { // ひとつ前のマウス座標(o_x、o_y)、マウスボタンが押されているか(flag) var o_x = 0, o_y = 0, flag = false; var cv = document.querySelector('#cv'); var c = cv.getContext('2d'); // 現在のマウス座標を求めるcoords関数(1) var coords = function(e) { var r = e.target.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top}; }; // キャンバスでマウスボタンが押下された場合の処理(2) cv.addEventListener('mousedown', function(e) { // マウスボタンが押された(フラグをオン) flag = true; // 現在のマウス位置を変数o_x、o_yに保存 var cd = coords(e); o_x = cd.x; o_y = cd.y; }, false); // キャンバスでマウスボタンが離された場合の処理(3) cv.addEventListener('mouseup', function(e) { // マウスボタンを離した(フラグをオフ) flag = false; }, false); // キャンバスでマウスポインタが移動した時の処理(4) cv.addEventListener('mousemove', function(e) { // マウスボタンが押されている場合のみ処理 if (flag) { // 現在の座標を変数x, yに設定 var cd = coords(e); x = cd.x; y = cd.y; // (o_x, o_y)~(x, y)の直線を描画 c.beginPath(); c.moveTo(o_x, o_y); c.lineTo(x, y); c.stroke(); // 現在の作業を変数o_x、o_yに退避 o_x = x; o_y = y; } }, false); } } );
マウス操作に合わせて曲線を描画するには、以下のようなしくみを準備しています。
- (a)マウスボタン押下時に現在の座標を記録
- (b)マウスポインタ移動時に、(a)で記録した基点から現在の座標位置まで直線を描画
- (c)さらに移動したら、(b)の位置から現在位置まで直線を描画
- (d)(b)~(c)を繰り返す
要は、内部的には細かな直線の集合として、疑似的に曲線を表現しているわけです。これを念頭に、サンプルの細かなコードを追っていきます。
まず、マウスボタンを押した時の処理です(2)。この時の座標を変数o_x、o_yに記録しておきます。変数flagは、マウスボタンが押された状態であるかを管理するためのフラグです。マウスボタンが押された時にフラグをオン(true)とし、離した時にオフ(false)とすることで(3)、「マウスボタンが押されている時だけ曲線を描画」できるようになります。こうしたフラグ管理をしていないと、マウスボタンを離した状態でポインタを動かしただけでも、キャンバスに曲線が描かれてしまうので要注意です。
なお、現在のマウス座標を取得する際には、やや注意が必要です。というのも、イベントオブジェクトeのclientX、clientYプロパティで取得できるのは、ページ左上からの座標なので、キャンバスの上/左余白の分だけ座標がずれてしまうのです。そこでキャンバスの左上の座標を取得するのが、e.target.getBoundingClientRectメソッドです。戻り値はオブジェクトで、X座標をleftプロパティ、Y座標をtopプロパティで取得できます。
この値をそれぞれclientX/clientYプロパティから差し引くことで、キャンバス上の正しいマウス座標を取得できるのです。この計算は典型的ですので、サンプルでもcoords関数として設定しています(1)。
そして、(4)が実際に曲線を描画する実処理です。ifブロックでflagのオンオフをチェックし、オンの場合のみ元の座標(o_x, o_y)から現在の座標(x, y)まで直線を描画します。描画のあとは、続けて次の直線をひくために、変数o_x、o_yに現在の座標をセットしておきます。
TIPS 033:キャンバス上の図形をData URL形式で保存する
キャンバスで描画した図形はData URLという形式に変換することで、ファイルやデータベースに保存したり、要素で表示したりすることが可能になります。
例えば、以下はTIPS 032で作成した落書き帳の内容をData URL形式に変換し、タグで再描画する例です。
[リスト06]落書き帳の内容を保存するコード(pointer.html)
window.addEventListener('DOMContentLoaded', function() { if (HTMLCanvasElement) { ...中略... // [コピー]ボタンクリック時の処理を定義 document.querySelector('#save').addEventListener('click', function(e) { // キャンバスの内容をもとに画像を生成 var img = new Image(); img.src = cv.toDataURL(); // Data URL形式の取得(1) // 画像が生成できたら、ページ末尾にImageオブジェクトを貼り付け img.addEventListener('load', function(e) { document.body.appendChild(img); }); }, false); } } ); ...中略... <canvas id="cv" width="400" height="300"> Canvas機能に対応したブラウザでアクセスしてください。 </canvas> <input id="save" type="button" value="コピー" />
Data URL形式とは、URLに直接、画像や音声などのデータを埋め込むための表現で、一般的には以下のように表せます。
data:コンテンツタイプ;base64,データ本体
▼
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt+...
Data URL形式のデータは、要素のsrc属性、要素のhref属性にそのまま埋め込むことができますので、データをいちいちファイルに落とし込む必要がないのが特長です。
キャンバス上の図形をData URL形式に変換するには、toDataURLメソッドを呼び出すだけです(1)。取得したData URL形式のデータは、そのままImageオブジェクトのsrcプロパティにセットし、ページに追加できます。
サンプルを実行し、ページ下の画像がブラウザの保存機能で画像ファイルとしても保存できることを確認してみましょう。
Canvas APIを使ってブラウザに図形を描画するサンプル(3)
連載バックナンバー
Think ITメルマガ会員登録受付中
全文検索エンジンによるおすすめ記事
- HTML+JavaScriptだけでブラウザに図形描画- Canvas API-
- 「TAURI」で「丸アートお絵描き」アプリを作ろう
- HTML+JavaScriptだけでブラウザに図形描画(2)- Canvas API-
- 動画・音声のブラウザ対応状況、canvasによる描画
- 「TAURI」で「画像ビューア」のサンプルアプリを作ろう
- デスクトップアプリライクな操作性を実現するドラッグ&ドロップAPI
- クッキーより便利になったブラウザ標準ストレージ- Web Storage
- JavaScriptでローカルファイルを自在に操る- File API
- HTML 5+JavaScriptでCanvasアプリを作る
- スマホアプリ開発にも便利な位置情報API- Geolocation API-