javascript - 无法让 Sprite 在圆形路径中移动

我有一个名为snitch的精灵，我试图使其在圆周上移动，其中心在canvas / 2（画布命名为空格）中，半径为30。我正在使用以下代码，但似乎没有要执行任何操作，“ snitch”仅停留在坐标（0,0）上不执行任何操作。我试图从MySprite2函数中删除这些（0,0）坐标，但是当我这样做时，告密符甚至不会出现。

var ctx = space.getContext("2d");
var FPS = 40;
var snitch= new MySprite2("http://i.imgur.com/IgNKTbW.png");

function MySprite2 (img_url) {
  var x = this.x = 0;
  var y = this.y = 0;
  this.visible= true;
  var img = this.MyImg2 = new Image();
  this.MyImg2.src = img_url;
}

MySprite2.prototype.Do_Frame_Things = function() {
  if (this.visible) ctx.drawImage(this.MyImg2, this.x, this.y);
};

function Do_a_Frame () {
  ctx.clearRect(0, 0, space.width, space.height);
  snitch.Do_Frame_Things();
}

function theMoves(snitch){
  var theta = 0;
  for (theta = 0; theta < 2 * Math.PI; theta+=0.1) {
     snitch.x = (space.width/2) + Math.sin(theta)*30;
     snitch.y = (space.height/2) + Math.cos(theta)*30;
  }
}
setInterval(theMoves, 1000/FPS);
setInterval(Do_a_Frame, 1000/FPS);

知道有什么问题吗？
现在可以移动了，但它只是直线而不是圆形。下面的新代码。

function MySprite (img_url) {
  var x = this.x = (space_x/2);
  var y = this.y = (space_y/2);
  var angle = this.angle = 0;
  this.visible= true;
  var img = this.MyImg = new Image();
  this.MyImg.src = img_url;
}

MySprite.prototype.Do_Frame_Things = function() {
  if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y);
};

function theMoves(){
  snitch.x += Math.cos(snitch.angle)*2;
  snitch.y += Math.sin(snitch.angle)*2;
}
setInterval(theMoves, 40);

最佳答案

我看到的第一个错误是您的sin函数将返回undefined，因为您需要使用以下语法来调用它：

 Math.sin()

第二个错误是您的snitch变量未定义。错误由以下代码行引发。

 snitch.x = (space.width/2) + Math.sin(theta)*30;

您的第三个错误是：

snitch.y = (space.height/2) + cos(theta)*30;

我创建了一种更加模块化的方法来帮助您进行循环动画。

现场演示：http://codepen.io/larryjoelane/pen/obGPwY

的HTML：

     <canvas width ="500" height="500" id="canvasOne"></canvas>

JavaScript：

 var canvas = new Canvas("canvasOne");

 var thisCanvas = canvas.instance("canvasOne");

 var imageURL = "http://bytewarestudios.com/assets/images/sphere.png";

 var image = canvas.createImage(imageURL);

 var context = canvas.context2D("canvasOne");

 /* Formula to determine x and y points on the circumference of a
  * circle
  * cx and cy = (origin or center of the circle)
  * r = radius of the circle
  * a = angle in radians(360deg = 6.285714285714285714285714285714 radian) or 2 * PI
  *  Formulas examples below for x and y points
  *   var x = cx + r * Math.cos(a);
  *   var y = cy + r * Math.sin(a);
  */

 //initialize the degree variable
 var deg = 0;

 //frames per second
 var fps = 45;

 window.requestAnimationFrame(drawCircle); // start the animation

 function drawCircle() { //begin function

   setTimeout(function() {

     //increment the degrees
     deg = deg + 1;

     //used to offset the circle radius to bring the circle in from the border of
     //the canvas
     var offset = 120;

     //radius of the circle
     var r = ((thisCanvas.width - offset) / 2);

     //x coordinate of the circle origin
     var cx = ((thisCanvas.width) / 2);

     //y coordinate of the circle origin
     var cy = ((thisCanvas.height) / 2);

     //store the angle in radians
     var a = canvas.toRadians(deg);

     var x = cx + r * Math.cos(a);
     var y = cy + r * Math.sin(a);

     //clear the canvas
     context.clearRect(0, 0, thisCanvas.width, thisCanvas.height);

     //draw the first image
     context.drawImage(image, x, y);

     //start the animation
     window.requestAnimationFrame(drawCircle);

   }, 1000 / fps);

 } //end function

 function Canvas() { //begin canvas constructor

   Canvas.prototype.createImage = function(imageURL) {

     //create a new image
     var image = new Image();

     //set the image source
     image.src = imageURL;

     //return the image object
     return image;

   };

   Canvas.prototype.context2D = function(id) {

     var canvas = document.getElementById(id);

     var context = canvas.getContext("2d");

     return context;

   };

   Canvas.prototype.instance = function(id) {

     var canvas = document.getElementById(id);

     return canvas;

   };

   Canvas.prototype.toRadians = function(angle) {

     return angle * (Math.PI / 180);

   };

 } //end canvas constructor