Рисование линий на холсте с помощью лагов IE9

Question

Я недавно пытался создать простой художник, используя холст. Я использовал mousedown, чтобы захватить начальную точку. При перемещении мыши я нарисовал линию от начальной точки до текущей точки и заменил начальную точку текущей точкой. Наконец я удалил обработчики событий при mouseup. Это решение отлично работало на Chrome,Firefox и Safari, но когда я тестировал его на IE9, я столкнулся с досадной ошибкой. Линии, которые я рисую, появляются только после события mouseup. Есть идеи, почему это происходит и как мне это исправить?

Я добавил простую тестовую страницу, чтобы продемонстрировать проблему http://kfirg.com/rage/main.htm Попробуйте нарисовать длинную линию, или круг, или что-то в этом роде. На chrome он будет работать отлично, а на IE9 будет лагать как сумасшедший.

Примечания: я использовал jQuery и jCanvas для этого простого художника. Я также попытался реализовать его самостоятельно, используя canvas api напрямую, и столкнулся с той же проблемой.

Обновленный jsFiddle: http://jsfiddle.net/t5QpN/1/

Answer 1

Я думаю, что ваш код тяжел для события mousemove:

 var fncMouseMoveHandler = function (e) {
        console.log('Move!', 'e', { x: e.offsetX, y: e.offsetY }, 'prev', prev);
        $main_canvas.drawLine({
            strokeStyle: settings.color,
            strokeWidth: 2,
            strokeCap: "round",
            strokeJoin: "miter",
            x1: prev.x,
            y1: prev.y,
            x2: e.offsetX,
            y2: e.offsetY
        });
        prev = { x: e.offsetX, y: e.offsetY };
    }

Вы используете API, применяете стиль и рассчитываете ненужные вещи. Код для рисования должен быть таким простым: вы получаете координаты и рисуете с помощью:

context.lineTo(x, y);
context.stroke();

стили вашего удара не должны быть определены в событии mousemove, холст запомнит настройки.

Отличное руководство доступно в Центре оперных разработок: http://dev.opera.com/articles/view/html5-canvas-painting/

Answer 2

На самом деле у вас больше ошибок, чем в IE. Из моих тестов линии спорадически нарисованы.

Я сделал jsFiddle этого, чтобы проверить.

У меня нет ответов, просто идеи. Я никогда не запускал холст-приложение типа карандашного рисунка, как это, я делал это с помощью опроса, когда мышь нажата. Очевидно, что ваш код отрисовки работает так, как вы ожидали в IE, если вы посмотрите на консоль. Мышь должна стрелять столько, сколько вы хотите.

Так что же может быть сделка. Я думаю одна из двух вещей

1. IE слишком занят чем-то другим в потоке, чтобы рисовать холст до тех пор, пока мышь не будет нажата
2. (Относится к 1) Возможно, вы слишком часто рисуете и перегружаете его

Если любой из этих двух правил верен, я думаю, вам нужно переключиться на опрос каждые X миллисекунд для определения положения мыши. Это не даст вам такой плавной линии, но вы можете настроить X, пока это не будет выглядеть хорошо.

Надеюсь это поможет!