画布 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/