画布Javascript循环

Question

我正在尝试循环我的动画，但不管我做什么，它都不会循环。我对canvas，javascript和代码一般都是新手。

var canvas = document.getElementById("fabrication");
var ctx = canvas.getContext("2d");
var background = new Image();
background.src = 
"C:/Users/dylan/Desktop/ProjectTwo/Images/fabricationbackground.jpg";
background.onload = function(){
}


//Loading all of my canvas

var posi =[];
posi[1] = 20;
posi[2] = 20;
var dx=10;
var dy=10;
var ballRadius = 4;

//Variables for drawing a ball and it's movement

function drawballleft(){


posi =xy(posi[1],posi[2])
}
function xy(x,y){
    ctx.drawImage(background,0,0);
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#FFFFFFF";
    ctx.fill();
    ctx.closePath();
    var newpos=[];
    newpos[1]= x +dx;
        newpos[2]= y +dy;
    return newpos;

//Drawing the ball, making it move off canvas.

if (newpos[1] > canvas.width) {
newpos[1] = 20;
}
if (newpos[2] > canvas.height) {
newpos[2] = 20;
}
//If statement to detect if the ball moves off the canvas, to make it return to original spot

}
setInterval(drawballleft, 20);
//Looping the function

如果我做错了什么，请告诉我，我真的想了解我在这里做的事情。球应该从画布上移开，然后循环回到自身，但是它从画布上移开并结束。

提前致谢！

Answer 1

我对您的代码进行了一些更改。

首先我使用requestAnimationFrame而不是setInterval。 http://www.javascriptkit.com/javatutors/requestanimationframe.shtml

其次我没有使用图像，因为我不想遇到CORS问题。但是你可以把你的背景图像。

我简化了你的posi数组，使用索引0和1而不是1和2来清理你如何创建你的数组。

我把你的return从两个ifs之前移动到了之后，所以当球离开时，球会向左或向上移动。我认为那是你看到的真正问题

var canvas = document.getElementById("fabrication");
var ctx = canvas.getContext("2d");

//Loading all of my canvas

var posi =[20,20];
var dx=10;
var dy=10;
var ballRadius = 4;

//Variables for drawing a ball and it's movement

function drawballleft(){
  posi = xy(posi[0],posi[1])
  requestAnimationFrame(drawballleft);
}

function xy(x,y){
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0,0,400,300);
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI*2);
  ctx.fillStyle = "#000";
  ctx.fill();
  ctx.closePath();
  var newpos=[x+dx,y+dy];

    //Drawing the ball, making it move off canvas.

  if (newpos[0] > canvas.width) {
    newpos[0] = 20;
  }
  if (newpos[1] > canvas.height) {
    newpos[1] = 20;
  }
  //If statement to detect if the ball moves off the canvas, to make it return to original spot

  return newpos;
}

requestAnimationFrame(drawballleft);

canvas {
  outline: 1px solid red;
}

<canvas width="400" height="300" id="fabrication"></canvas>

Answer 2

使一切更简单...使用外部脚本来处理画布。

一个非常好的;）：https://github.com/GustavGenberg/handy-front-end#canvasjs

包括它

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/Canvas.js"></script>

然后就是这么简单：

// Setup canvas
const canvas = new Canvas('my-canvas', 400, 300).start(function (ctx, handyObject, now) {

    // init
    handyObject.Ball = {};

    handyObject.Ball.position = { x: 20, y: 20 };
    handyObject.Ball.dx = 10;
    handyObject.Ball.dy = 10;
    handyObject.Ball.ballRadius = 4;

  });

// Update loop, runs before draw loop
canvas.on('update', function (handyObject, delta, now) {

    handyObject.Ball.position.x += handyObject.Ball.dx;
    handyObject.Ball.position.y += handyObject.Ball.dy;

    if(handyObject.Ball.position.x > canvas.width)
      handyObject.Ball.position.x = 20;

    if(handyObject.Ball.position.y > canvas.height)
      handyObject.Ball.position.y = 20;

});

// Draw loop
canvas.on('draw', function (ctx, handyObject, delta, now) {

    ctx.clear();

    ctx.beginPath();

    ctx.arc(handyObject.Ball.position.x, handyObject.Ball.position.y, handyObject.Ball.ballRadius, 0, Math.PI * 2);

    ctx.fillStyle = '#000';
    ctx.fill();

    ctx.closePath();

});

我重新构建了您的代码并使用了外部脚本，现在它看起来更清晰，更容易阅读和删除！

的jsfiddle：https://jsfiddle.net/n7osvt7y/