Сдвинуть окружность в право по нажатии клавиши

Окружность рисуется JS кодом в CANVAS, то есть вот так:
var centerX = 530,
    centerY = 300,
    radius = 120,
    startingAngle = 0,
    endingAngle = 2 * Math.PI;
 
context.arc(centerX, centerY, radius, startingAngle, endingAngle);
context.stroke();
По нажатию клавиши эта окружность должна сдвигаться в право, то есть у переменно centerX меняю значение, например centerX++, но самое интересное, что вместо сдвига окружность рисуется еще раз, в итоге получается две окружности, первая и та, что со сдвигом! Вообщем сколько на клавишу нажмешь, столько и отрисуется)Я уже что только не перепробовал, все никак не догоняю...С анимацией обычных объектов ( например div ) нет проблем, но нужно именно отрисованную перемещать)Знатоки cyberforuma, помогите!
3 ответа

Бабуля, ну дык затирать надо старое и перерисовывать


И как реализовать затирание?Допустим одна и та же функция вызвалась 10 раз, как мне удалить девять первых? Или как мне удалить 9 первых окружностей?Просто помимо окружности еще есть пружина, которая вырисовывается при помощи кривых безье и с ней точно такая же история, что и с окружностью)У меня уже была мысль о затирании, но безуспешно и гугл не помог)


Бабуля, залить экран белым цветом? вот код на эту тему-едущий квадрат
var canvas;
var context;
 
var x = 50; 
 
function update()
{
 context.fillStyle="#FFFFFF";                      
 context.fillRect(0,0,canvas.width,canvas.height); 
 
 context.fillStyle="#000000";
 context.fillRect(x,30,10,20);
 x++; 
}
 
window.onload = function()
{
 canvas  = document.getElementById("game");
 if (canvas.getContext)
 {
  context = canvas.getContext("2d");
  setInterval(update, 100);
 }
 else
 {
  alert("Не получилось получить контекст!");
 }
}