如何在html5画布中向前和向后移动圆圈中的对象？ [英] how to move object in circle forward and backward in html5 canvas?

问题描述

我正在用html5画布开发一个小应用程序。我需要使用键盘键以圆周运动方式移动对象。我可以使用键盘键移动对象但是有错误。对象不会从同一位置向前或向后移动。任何人都可以帮我完成此操作。

I am developing a small app in html5 canvas. I need to move a object in circular motion using keyboard keys . I am able to move the object using keyboard keys but there are bugs .The object do not move back ward or forward from the same position .Can any body help me completing this.

请检查以下代码。任何形式的帮助都是非常值得的

Please check the code from following. Any kind of help will be highly appreciable

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);

推荐答案

使用keymap对象可以更轻松......

Using a keymap object makes it easier...

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>

这篇关于如何在html5画布中向前和向后移动圆圈中的对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！