Question

在这个动画中，我为两个球做了两个功能，但是我没有第二个球进入这个画布。我的两个球的代码 -

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/

Answer 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);
}

以上是手工打印而未经过测试，可以大大改进..但它应该有用并给你一个想法。

Answer 2

draw()和draw2()都清除了画布，因此您只会看到上次更新。此外，您还有一个全局x，y，dx和dy，这意味着您的球永远都会在完全相同的位置绘制。

多组间隔时间

2 个答案: