html 5 addEventListener проблема с обновлением элемента Canvas - PullRequest
Новая
       3

html 5 addEventListener проблема с обновлением элемента Canvas

1 голос
/ 15 июля 2010

У меня проблема с тем, что addEventListener правильно запускается с моим элементом canvas.

Проблема: Когда я добавляю addEventLister в свой элемент canvas, он автоматически заставляет частоту обновления анимации запускаться в то же время, когда запускается прослушиватель событий.

В основном у меня есть "setInterval (draw, 500);" который обновляет холст каждые 500 миллисекунд. Без слушателя событий он будет постоянно обновляться с запланированной скоростью; однако, когда я добавляю слушателя действия, он принудительно обновляет холст и ускоряет анимацию.

В исходном коде вы найдете две функции drawCircle и drawCircleTest, которые специально предназначены для тестирования проблемы обновления.

хм, по какой-то причине исходный код не хочет правильно вставлять

Исходный код: http://home.insightbb.com/~epyonxl1/html5_test.htm

Заранее спасибо, что заглянули !!!

1 Ответ

1 голос
/ 15 июля 2010

Поскольку вы вызываете draw для события mouseover, как только вы перемещаете мышь на холст, в следующий раз, когда setInterval draw () вызывается mouseover, вызовы draw () увеличили значение testNum1 на большее числособытия при наведении курсораЯ добавил testNum1 в конец вывода "Console" здесь http://jsfiddle.net/uM5VC/, чтобы вы могли увидеть эффект (как ни странно, это не работает должным образом в chrome. Ссылка ниже делает).

Решение состоит в том, чтобы использовать другую функцию для события mouseover, которая устанавливает clientHeight и clientWidth в переменные, объявленные вне области рисования.См. http://jsfiddle.net/aMdRm/3/

. Я добавил эти переменные перед любой из функций 

var clientX, clientY;

и этой функцией, чтобы установить их 

function changeCoords(e){
    clientX = e.clientX;
    clientY = e.clientY;
}

теперь при наведении мышиchangeCoords и событие draw ссылаются на clientX и clientY, а не на e.clientX и e.clientY.

...