マウスボタンが押されているときだけ描画する
マウスボタンが押されている時だけ点を描くには、フラグ変数を用意してマウスボタンのステータスをに入れておきます。ここではdrawFlag変数を用意し、マウスボタンが押されたらtrue、離されたらfalseにします。マウスイベントのmousedown、mouseupが発生したらdrawFlag変数にtrue、falseを入れるだけです。
マウスが移動するとmousemoveイベントが発生し、関数drawが呼び出されます。draw関数内でdrawFlag変数の内容を調べて、trueなら点を描き、falseなら何もせずに関数から抜けます。
これで、マウスボタンが押されている間だけ、点を描画できます（サンプル02）。ただ、このままだと、マウスボタンを押したままカーソルを動かしても、移動先の座標に赤い点が表示されるだけですで、お絵かきツールとしてはまだ不十分です。多くのお絵かきツールはマウスボタンを押したままカーソルを動かすと、滑らかに線を描きます。次は、点と点の間に直線を描くようにプログラムを改良します。
サンプル02の実行画面。マウスボタンを押している時だけ点を描く。だいぶお絵かきツールに近づいてきたが、まだ滑らかな描画とはいえない
●サンプル02[JavaScript:draw.js]
var drawFlag = false;
window.addEventListener("load", function(){
var can = document.getElementById("myCanvas");
can.addEventListener("mousemove", draw, true);
can.addEventListener("mousedown", function(){
drawFlag = true;
}, false);
can.addEventListener("mouseup", function(){
drawFlag = false;
}, false);
}, true);
// 描画処理
function draw(e){
if (!drawFlag) return;
var x = e.clientX;
var y = e.clientY;
var can = document.getElementById("myCanvas");
var context = can.getContext("2d");
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(x,y,1,1);
}
