キャンバスJavascript Looping

Question

私はアニメーションをループしようとしていますが、私が何をしていてもループしません。私はキャンバス、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

私はあなたのコードをいくつか変更しました。

最初にsetIntervalの代わりに​​を使用しています。 http://www.javascriptkit.com/javatutors/requestanimationframe.shtml

2番目私はCORSの問題に遭遇したくないので、画像を使用していません。しかし、あなたはバックグラウンドイメージを戻すことができます。

私はあなたの配列を作成する方法をクリーンアップする代わりに1と2のインデックス0と1を使用するようにposi配列を簡素化。

returnを2つ前に移動させたので、ボールが側面から外れたときにボールが左または上に移動します。 私は キャンバスを処理するための外部スクリプトを使用して...あなたはそれをすべてをさらに簡単にするために

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

を見ていた本当の問題だったと思います。

A本当に良いもの;）： 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/