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);