Приветствую, столкнулся с проблемой, когда при onmousemove быстро водить мышкой по экрану событие начинает пропускать некоторые промежуточные координаты, а мне нужно учитывать абсолютно все, как этого можно добиться?
Пример с canvas:
Попробуйте быстро быстро поводить по холсту и круги начнут отделяться
<head>
<script type="text/javascript">
var brush = {size: 20};
function getOffset(elem) {
if (elem.getBoundingClientRect) {
// "правильный" вариант
return getOffsetRect(elem)
} else {
// пусть работает хоть как-то
return getOffsetSum(elem)
}
}
function getOffsetSum(elem) {
var top=0, left=0
while(elem) {
top = top + parseInt(elem.offsetTop)
left = left + parseInt(elem.offsetLeft)
elem = elem.offsetParent
}
return {top: top, left: left}
}
function getOffsetRect(elem) {
// (1)
var box = elem.getBoundingClientRect()
// (2)
var body = document.body
var docElem = document.documentElement
// (3)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
// (4)
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
// (5)
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
function radian(deegree) {
return (Math.PI / 180) * deegree;
}
function draw(coordinats) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(coordinats.x, coordinats.y, brush.size, 0, radian(360), true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="600" height="300" style="border: 2px black solid; margin-left: 50px;">
Ваш браузер не поддерживает canvas.
</canvas>
<script type="text/javascript">
(function(){
var coordinats = {}, node = document.getElementById('canvas'), drag = false;
node.onmousedown = function (e) {
e = e || window.event; drag = true;
coordinats.x = e.clientX + document.body.scrollLeft - parseInt(getOffsetSum(node).left);
coordinats.y = e.clientY + document.body.scrollTop - parseInt(getOffsetSum(node).top);
draw({x: coordinats.x, y: coordinats.y});
}
node.onmousemove = function (e) {
e = e || window.event;
var change = {
x: e.clientX + document.body.scrollLeft - parseInt(getOffsetSum(node).left),
y: e.clientY + document.body.scrollTop - parseInt(getOffsetSum(node).top)
}
if(drag) draw({x: change.x, y: change.y});
}
document.body.onmouseup = function () {drag = false;}
})();
</script>
</body>
p.s. перепутал, тему не в том разделе создал