Я написал небольшой рисунок script (canvas) для этого сайта: http://scri.ch/
Когда вы нажимаете на документ, каждое событие mousemove в основном выполняет следующие действия:
- Получить координаты.
- context.lineTo() между этой точкой и предыдущей версией
- context.stroke() строка
Как вы можете видеть, если вы перемещаете курсор очень быстро, событие не запускается достаточно (в зависимости от вашего процессора/браузера/т.д.), а прямая линия прослеживается.
В псевдокоде:
window.addEventListener('mousemove', function(e){
myContext.lineTo(e.pageX, e.pageY);
myContext.stroke();
}, false);
Это известная проблема, и решение в порядке, но я хотел бы ее оптимизировать.
Поэтому вместо stroke() каждый раз, когда запускается событие mousemove, я помещаю новые координаты в очередь массива и регулярно рисую/пустым с помощью таймера.
В псевдокоде:
var coordsQueue = [];
window.addEventListener('mousemove', function(e){
coordsQueue.push([e.pageX, e.pageY]);
}, false);
function drawLoop(){
window.setTimeout(function(){
var coords;
while (coords = coordsQueue.shift()) {
myContext.lineTo(coords[0], coords[1]);
}
myContext.stroke();
drawLoop();
}, 1000); // For testing purposes
}
Но это не улучшило линию. Поэтому я попытался нарисовать точку на mousemove. Тот же результат: слишком много места между точками.
Это заставило меня понять, что первый блок кода достаточно эффективен, это просто событие mousemove, которое запускается слишком медленно.
Итак, после того, как я провел некоторое время, чтобы реализовать бесполезную оптимизацию, ваш поворот: есть ли способ оптимизировать скорость запуска mousemove в сценариях DOM?
Возможно ли "запросить" позицию мыши в любое время?
Спасибо за ваши советы!
