Я написал небольшой сценарий рисования (холст) для этого веб-сайта: 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?
Можно ли в любой момент «запросить» позицию мыши?
Спасибо за советы!
