素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

mousemoveイベントの発行タイミングとドラッグ

ブラウザでお絵かきをしたくて、下のようなコードを書いたら、取りこぼしがおおくて使い物にならない。
mousemoveイベントはマウスポインタが1ピクセルでも動いたら発行されるものと思っていたけど、違うようだ。
どうすればいいんだろう。

var canvas = document.body.appendChild(document.createElement('canvas'));
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = 'absolute';
canvas.style.top = '0px';
canvas.style.left = '0px';

var context = canvas.getContext('2d');
var d_flag = null;

canvas.addEventListener('mousedown',
function(e) {
  d_flag = true;
},
false);
canvas.addEventListener('mouseup',
function(e) {
  d_flag = false;
},
false);
canvas.addEventListener('mousemove',
function(e) {
  if (d_flag) context.fillRect(e.clientX, e.clientY, 5, 5);
},
false);