FC2ブログ

マウスでCanvas描画

マウスでCanvas描画

まず、マウスポインタがCanvasにあるか判別
これには
mousemoveイベントを使う
Canvasにないなら、そこで終了

canvasObj.addEventListener("mousemove",fuction(evt){

さらに、判定
今度はマウスボタンを押しているか
判定
もし、判定して押してないなら
その後の処理は不要だから終了

if(!canvasObj.drawFlag){
return;
}

ここまで、判定を通ってきたら
マウスの座標を調べる

var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;

そして、座標を線で結んでいく
結ぶには
前回の座標と、今の座標を直線で描画すればok

strokeStyleで色を設定
lineWidthで線の幅
lineCapで roundを指定すると線の端が丸くなるのでこれを指定

beginPathでパスを生成し
moveTo()とlineTo()で座標を指定

ちなみにパラメータは
moveTo(前のX座標, 前のY座標)

lineTo(今のX座標, 今のY座標)
となる

そして、後は
stroke()で実際線を描く
strokeを書かないと、場所を指定しただけなので注意
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック