マウスで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座標, 前のＹ座標)
lineTo(今のX座標, 今のY座標)
となる
そして、後は
stroke()で実際線を描く
strokeを書かないと、場所を指定しただけなので注意