マウス・クリックでクリック・ポイントに丸を描くの巻。
ユーザーに操作してもらうコンテンツを作るためにマウス操作を可能にしなくては…
JavaScriptでclickイベントを取得してCanvasに描画する。
クリック・ポイントの取得
1.Canvas Elementでclickイベントを取得
2.クリックした座標を取得
＊HTML上(window)の座標になります
3.CanvasのHTML上(window)の位置を取得
4.2から3を差引いて描画用の座標を取得
5.4の座標でなにかする
てな感じで行う。
＊Canvasの座標を取得するためには<canvas>は<body>に対してposition:absolute;になってないとダメ。
（【追記】absoluteというかoffset値を取得してwindow原点位置（左上）からの位置を取得するのにbodyに対してabsoluteだと取得が簡単になるという意味。）
＊全面Canvasにしてしまえばそんな手間もかからないけど。
（【追記】全画面canvasにすればoffsetは(0, 0)になるので取得が簡単になるという意味。
しかしwindow resize 処理を組み込む必要が出てくる。
スマホ・タブレットのorientation対応、AndroidでのCanvas resize時のブラウザ・クラッシュ対応などやらなくてはいけないことも増える。）
HTML
<canvas id='canvas'></canvas> |
JavaScript
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = 'rgba(255,0,0,0.25)'; canvas.addEventListener('click', onClick, false); function onClick (e) { var x = y = 0; x = e.clientX - canvas.offsetLeft; y = e.clientY - canvas.offsetTop; context.beginPath(); context.arc(x,y,15,0,Math.PI*2,true); context.closePath(); context.fill(); }; |
あたりまえだけど、Canvasでのクリック・イベントはCanvas Elementでしか取得できない。
（【追記】delegateを使えば document.body でも取得可能。その場合はnodeNameなどでcanvas上でのクリックなのかを判定する必要があります。）
これはかなりイタい。
Canvas上に描いたパーツをボタンのように使うためにはクリック座標がそのパーツ上かどうかを判定させるルーチンが必要になります。
固定だったらまだしも動いていたりするとやだなぁ〜。
次の課題ができましたとさ。
update 2014-07-22
【Canvas練習ノート】マウス（タッチ）操作 – ドラッグとか
2年たち少し考えを整理しました。
ピンバック: Canvas始めました – ボタンを作る - イナヅマtvログ
ピンバック: Canvas始めました - Canvas APIで遊んで（遊ばれて）わかったことをだらだらと « イナヅマtvログ