如何在html5画布中向前和向后移动圆圈中的对象？

我正在 html5 canvas 中开发一个小应用程序。我需要使用键盘按键以圆周运动移动对象。我可以使用键盘按键移动对象，但存在错误。该对象不会从同一位置向后或向前移动。任何人都可以帮助我完成此操作。

请检查以下代码。任何形式的帮助将非常感激

http://jsfiddle.net/tmrhq6s5/ http://jsfiddle.net/tmrhq6s5/

if ( !window.requestAnimationFrame ) {
    window.requestAnimationFrame = ( function() {

        return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

            window.setTimeout( callback, 100 / 60 );

        };

    } )();
}

var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var velocityX = -10;
var velocityY = -10;
var gravity = 0;
var w = canvas.width;
var h = canvas.height;
var angle = 3 * Math.PI / 180;
var cx = 200;
var cy = 200;
var radius = 100;
canvas.onclick = myClick;
canvas.addEventListener( "keydown", doKeyDown, true);
function myClick(e) {


    // A simpler function:
    //mouse = getMouse2(e);
//    alert(e.pageX + ',' + e.pageY);


}

function doKeyDown(e) {
window.requestAnimationFrame(redraw);
// get which key the user pressed
    var key = event.which;

    // Let keypress handle displayable characters
    if (key > 46) {
        return;
    }

    switch (key) {
        case 37:
            // left key

            // move the ball 1 left by subtracting 1 from ballX
              window.requestAnimationFrame(redrawreverse);



            break;

        case 39:
            // right key

            // move the ball 1 right by adding 1 to ballX
           window.requestAnimationFrame(redraw);



            break;


    }



}

function draw(x, y) {

    ctx.save();
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(x , y , 10, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
};


var i = 0;
var redraw = function() {
     // increase the angle of rotation
        angle +=  1.9*Math.PI / 180;

        // calculate the new ball.x / ball.y

        var newX = cx - radius * Math.cos(angle);
        var newY = cy - radius * Math.sin(angle);
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        // draw
        draw(newX, newY);
// alert(" ~~x"+newX+" ~~y "+newY)
   //window.requestAnimationFrame(redraw);
};

var redrawreverse = function() {
     // increase the angle of rotation

 angle +=  1.9*Math.PI / 180;
        // calculate the new ball.x / ball.y

        var newX = cx + radius * Math.cos(-angle);
        var newY = cy + radius * Math.sin(-angle);
        ctx.clearRect(0, 0, w, h);
        ctx.beginPath();
        ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.stroke();
        // draw
        draw(newX, newY);
  // alert(""+newX+" ~~y "+newY)

   //window.requestAnimationFrame(redraw);
};
window.requestAnimationFrame(redraw);
window.addEventListener("keydown", doKeyDown, true);

使用键盘映射对象使事情变得更容易......

if ( !window.requestAnimationFrame ) {
  window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

      window.setTimeout( callback, 1000 / 60 );

    };

  } )();
}

var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var angle = 0;
var cx = 200;
var cy = 200;
var radius = 100;
var speed = 0.1;

var keymap = {
  left: false,
  right: false
};

function doKeyDown(e) {
  var key = event.which;
  switch (key) {
      
    case 37:
      keymap.left = -1;
      break;

    case 39:
      keymap.right = 1;
      break;

  }
}

function doKeyUp(e) {
  var key = event.which;
  switch (key) {
      
    case 37:
      keymap.left = 0;
      break;

    case 39:
      keymap.right = 0;
      break;

  }
}


function drawCircle(x, y, r, c, s) {
  ctx.fillStyle = c;  
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, false);
  ctx.closePath();
  if(s) ctx.stroke();
  else ctx.fill();
}


function redCircle() {
// increase the angle of rotation
  
  var direction = keymap.left + keymap.right;
  angle +=  speed * direction;

  var x = cx + (radius * Math.cos(angle));
  var y = cy + (radius * Math.sin(angle));
  
  drawCircle(x, y, 10, 'red');

}

var redraw = function() {
  ctx.clearRect(0, 0, w, h);
  drawCircle(cx, cy, radius, 'black', 'stroke');
  redCircle();
  window.requestAnimationFrame(redraw);
};


window.addEventListener("keydown", doKeyDown, true);
window.addEventListener("keyup", doKeyUp, true);

redraw();

html {
    height: 100%;
}
body{
    padding: 0; margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
/* Some basic styling */
#scene {
	display: block;
	border: 1px solid blue;
	margin: 50px auto;
}

<canvas id="scene" width=400 height=400></canvas>