多間隔時間設定

在這裏，在這個動畫，我做了兩個功能兩個球，但沒有第二球我在這個畫布上獲得。我的兩個代碼balls-的職能 -多間隔時間設定

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 

}

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

呼喚我們能做到這一點在JavaScript。

期待result-

兩個球由同現在的位置來了，我要當第一個球在畫布框反彈，剛過10毫秒從draw2()另一個球應該進來框架和行動一樣。

Fiddle- http://jsfiddle.net/stackmanoz/B6XZC/4/

來源

2013-01-24 Manoj

每次打電話給你的抽獎功能你清理你的畫布。這就是爲什麼你只看到一個球。 – Pebbl

實際上，您的第一個'return'語句將停止執行第二個setInterval。 – Pebbl

這有效嗎？返回setInterval（draw，10，draw2,20）; – Manoj

爲了得到這個工作，你需要從你的畫布清除碼分離出來，你的抽獎功能，並且有一個週期/輪詢循環，它是你想你的球在不同的時間出現。

您不妨利用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-24 12:18:23 Pebbl

draw()和draw2()都清除畫布，所以您只會看到最後一次更新。你也有一個單一的全球x,y,0 dx，和dy，這意味着你的球是永遠在同一個位置繪製。

來源

2013-01-24 12:19:34 user1

多間隔時間設定

回答

相關問題