1

このアニメーションでは、2 つのボールに対して 2 つの関数を作成しましたが、このキャンバスには 2 つ目のボールはありません。両方のボールの私のコード-

function draw() {
    ctx.clearRect(0, 0, 300, 300);
    //ctx.beginPath();
    //ctx.arc(x, y, 10, 0, 2 * Math.PI, true);
    //ctx.closePath();
    ctx.drawImage(img, x, y, 20, 20);
    ctx.fill();
    x += dx;
    y += dy;

    bounce();
}
function draw2()

{
    ctx.clearRect(0,0,300,300);
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    x += dx;
    y += dy;
    bounce();
}

関数の呼び出し -

    function init() {
        var ctx = document.getElementById("canvas").getContext("2d");

        return setInterval(draw, 10);
return setInterval(draw2,20);
                   //This is how i am calling both function 

}

Javascriptでこれを行うことはできますか?

期待される結果-

両方のボールが同じ位置から来ています。最初のボールがキャンバス フレームでバウンドしたときに、10 ミリ秒後に別のボールdraw2 ()がフレームに入って同じように動作する必要があります。

フィドル - http://jsfiddle.net/stackmanoz/B6XZC/4/

4

2 に答える 2

1

これを機能させるには、描画関数をキャンバス クリア コー​​ドから分離し、ボールを表示させたい時間とは別のティック/ポーリング ループを用意する必要があります。

JavaScript コンストラクターの機能を利用して、ボールを処理することもできます。

function ball( ctx, x, y, dx, dy ){
  this.img = ? /// you'll have to set your image, whatever it is.
  this.x = x||0;
  this.y = y||0;
  this.dx = dx||0;
  this.dy = dy||0;
  this.draw = function(){
    ctx.drawImage(this.img, this.x, this.y, 20, 20);
  }
  this.tick = function(){
    this.x += this.dx;
    this.y += this.dy;
    this.draw();
  }
}

そして、以下を使用して描画を処理します。

function clear( ctx, cnv ){
  ctx.clearRect(0, 0, 300, 300);
  /// a faster way to clear can be: 
  /// cnv.width += 0; 
  /// or:
  /// cnv.width = cnv.width;
}

/// you should always have a core loop that delegates to other functions/objs
function loop( cnv, ctx, balls ){
  clear(ctx, cnv);
  for( var i=0; i<balls.length; i++ ){
    balls[i].tick()
  }
}

function init() {
  var cnv = document.getElementById("canvas");
  var ctx = cnv.getContext("2d");
  /// create the first ball and add it to your ball list
  var balls = [new ball(ctx,50,0,1,1)];
  /// 10ms wait before the extra ball is added
  setTimeout(function(){balls.push( new ball(ctx,100,0,1,1) );},10); 
  /// this will be your animation loop
  return setInterval(function(){loop(cnv, ctx, balls)}, 10);
}

上記は手動で入力されており、テストされておらず、大幅に改善される可能性があります..しかし、それは機能し、アイデアを与えるはずです.

于 2013-01-24T12:18:23.867 に答える
0

両方ともキャンバスdraw()をdraw2()クリアすると、最後の更新のみが表示されます。また、単一のグローバルx、y、dx、およびdyがあります。つまり、両方のボールがまったく同じ位置に永久に描画されます。

于 2013-01-24T12:19:34.483 に答える