1

在这个动画中，我为两个球制作了两个函数，但是我在这个画布中没有第二个球。我的两个球的代码-

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 回答