Анимация в Canvas не работает

Question

Я написал простой код, чтобы получить контекст холста и добавить два объекта Rectange, чтобы нарисовать их на холсте. Моя проблема в том, что я не могу их анимировать, потому что, когда я пытаюсь использовать context.clearRect (); он выдает ошибку о том, что контекст не определен. Но есть ли другой способ рисования, который у меня не получится. Я не могу найти решение. Ошибки, которые я видел, были на консоли Firebug. У меня есть мой код на скрипке в

http://jsfiddle.net/shivkumarganesh/b8cKZ/

Answer 1

drawObj.push(new Rectangle("20", "20", "30", "40", "#3A5BCD"));
drawObj.push(new Rectangle("50", "50", "100", "30", "#EF2B36"));

Вы передаете строки для x, y, ширины и высоты.

objArray[i].width=objArray[i].width+j;
objArray[i].height=objArray[i].height+j;

... так что это конкатенация строк, что означает, что ширина в конечном итоге становится строкой, говорящей "3000000000000000000000" ...

Вы должны научиться использовать отладчик Chrome (control + shift + j), с ним действительно легко найти подобные проблемы.

Также используйте requestAnimationFrame вместо setTimeout и не бессмысленно перерисовывайте все 100 раз за кадр:)

Answer 2

setTimeout(refresh, 1000);

это проблема. Вы вызываете эту функцию, но не передаете параметры. Также необязательно иметь refresh обязательные параметры, поскольку вы объявили необходимые переменные как глобальные.