描画のときの処理
実際に、canvasに描画するには
canvasObj.addEventListener(“mousemove”,fuction(evt){
if(!canvasObj.drawFlag){
return;
}
var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;
context.strokeStyle=”rgba(255,255,255,1)”;
context.lineWidth=10;
context.lineCap=”round”;
context.beginPath();
context.moveTo(canvasObj.oldX,canvasObj.oldY);
context.lineTo(x,y);
context.stroke;
context.closePath();
canvasObj.oldX=x;
canvasObj.oldY=y;
},false);
では、恒例の解説へ
まず、マウスポインタがcanvasにあるかを判定する
これは、mousemoveイベントを使う
canvasObj.addEventListener(“mousemove”,fuction(evt){
マウスボタンが押されたら
押されたら場所のx,y座標を求め
Canvasオブジェクトの
oldXoldY
へ代入
このときに、格納する
oldX
oldY
は自作の変数
あと、マウスの座標はEventオブジェクトに入っているので
offsetX
offsetY
を読み出せば、x,y座標を取得できる
ただし、firefoxの場合は別で
layerX
layerY
に格納されている
このため
||を使って、どちらでも対処可能にする
||は論理演算子のOR
ここをソースにすると
canvasObj.oldX=evt.offsetX||evt.layerX;
canvasObj.oldY=evt.offsetY||evt.layerY;
続いて、マウスのボタンを押している状態か、それとも押していない状態か判別するため
フラグを作る
押した、押さないだけなら
clickイベントでいいけと
押したままというイベントはないので
これはフラグで対応する
ということで、
mousedownイベントなら
マウスを押した状態なので
このときに
drawFlag=true
にする
逆に、マウスを離したときには
mouseupイベントのときに
drawFlag=false;
とすれば
判別することができる
とりあえず、ここまでが
描画するときに必要なマウスの部分の処理