requestAnimationFrameを使用した単純なボールアニメーションHTML5

Question

私はHTML5とJavaScriptを使用していくつかのアニメーションを作成しようとしています。 現在、ボールのJavaScriptクラスを作成しました。これは、ボールの位置と描画機能を更新する必要があります更新機能を有していることを描く必要があります。

function ballGameLoop() { 
    ball.draw(mainContext); 
    ball.update(); 
    requestAnimationFrame(ballGameLoop); 
} 

そして：私は次のメソッドを作成している私のメインセクションで

/*global Vector*/ 
var Ball = (function() { 
function Ball(pPostion) { 
    this.setPosition(pPostion); 
} 

Ball.prototype.getPosition = function() { 
    return this.mPosition; 
}; 
Ball.prototype.setPosition = function (pPosition) { 
    this.mPosition = pPosition; 
}; 
Ball.prototype.draw = function (pContext) { 
    pContext.save(); 
    pContext.beginPath(); 
    pContext.arc(100, 100, 20, 0, Math.PI * 2, true); 
    pContext.closePath(); 
    pContext.fillStyle = '#ff0000'; 
    pContext.stroke(); 
    pContext.restore(); 
}; 

Ball.prototype.update = function() { 
    this.getPosition().add(new Vector(10, 0)); 
}; 

return Ball; 
}()); 

をそれはボールを引きますが、まったく動いていないようです。私は、ボールをアニメーション化したい特定のタイプの方法を持っていません。どんな種類の動きでも良いでしょう。誰かが私が間違っているかもしれないところについて助言を与えることができますか？

Answer 1

見た目からは、同じ座標で繰り返し弧を描いているようです（（100,100）の中心）。

ボールの位置をこれに組み込むことは、レンダリングの位置をオブジェクトの位置に依存させる方法になります。それはそう何から、次の線に沿って何かが動きを与えるだろう：

Ball.prototype.draw = function (pContext) { 
    var coordinates = this.getPosition(); 
    pContext.save(); 
    pContext.beginPath(); 
    pContext.arc(coordinates.X, coordinates.Y, 20, 0, Math.PI * 2, true); 
    pContext.closePath(); 
    pContext.fillStyle = '#ff0000'; 
    pContext.stroke(); 
    pContext.restore(); 
}; 

私はどのようにセットアップVectorオブジェクトに仮定もちろんので、私は、xを推測しているとyをしてアクセスすることができます（ Vector）.Xと（Vector）.Yをそれぞれ指定します。とにかく私のアプローチはそれだけです。