एचटीएमएल 5 कैनवास एनीमेशन ठीक से काम नहीं कर रहा है

Question

मैं कैनवास में एक एनीमेशन बनाने की कोशिश कर रहा हूं। पहली बार यह ठीक काम करता था लेकिन जब सेटटाइमआउट के माध्यम से एक नया तत्व जोड़ा गया था, तो सभी तत्वों की गति में वृद्धि हुई है। क्या कोई मुझे बता सकता है कि यह गति क्यों बढ़ रही है। Fiddle Link

var canvas = $("#canvas")[0], 
    context = canvas.getContext("2d"), 
    bloons = {}, 
    bloonIndex = 0; 

var c_wdh = 360, 
    c_hgt = 540; 


function createBloon(x, y) { 
    this.x = x; 
    this.y = y; 
    this.vx = 1, 
    this.vy = 3; 
    bloonIndex++; 
    bloons[bloonIndex] = this; 
    this.id = bloonIndex; 
} 

createBloon.prototype.drawImage = function() { 
    this.y -= this.vy; 
    context.fillStyle = "#FF0000"; 
    context.fillRect(this.x, this.y, 50, 50); 
    if(this.y <= -120){ 
     delete bloons[this.id]; 
    } 
}; 


var nob = 0; 
var i = 1; 
var rendorBloon = setInterval(function(){ 
    bloons[i] = new createBloon(Math.random() * c_wdh, c_hgt); 
    var animate = setInterval(function() { 
     context.clearRect(0, 0, c_wdh, c_hgt);   
     for (var i in bloons){ 
     bloons[i].drawImage(); 
     } 
    }, 30); 

    i++; 
    nob++; 
    if(nob >= 10){ 
     clearInterval(rendorBloon); 
    }  
}, 1000); 

Answer 1

मैं क्यों एनीमेशन त्वरित है आप को समझाने की कोशिश करेंगे। हर बार जब rendorBloonsetInterval को नया setInterval बनाया जाता है।

1 setInterval is created. 1 setInterval is running, it will run every 30 milliseconds 

2 - की rendorBloonsetInterval (2 सेकंड) दूसरा रन:

1 setInterval is created. 2 setInterval are running, they will run every 30 milliseconds 

3 - की rendorBloonsetInterval (1 सेकंड) फर्स्ट रन

1: अगले चरणों के प्रक्रिया को समझा - rendorBloonsetInterval (3 सेकंड):

1 setInterval is created. 3 setInterval are running, they will run every 30 milliseconds 

का तीसरा भाग

4 - ... जारी 10 बार

हर rendorBloon निष्पादन में, एक नए setInterval बनाई गई है और प्रत्येक setInterval कार्यान्वित drawImage विधि है कि 3 पिक्सल ऊपर छवि ले जाता है। जब आप rendorBloon सेट इंटरवल को साफ़ करते हैं तो आपके पास प्रत्येक बॉक्स को स्थानांतरित करने की कोशिश करने वाले 10 फ़ंक्शन होंगे। परिणाम: बक्से पहले पुनरावृत्ति के साथ 3 पिक्सल चलाते हैं, दूसरे के साथ 6 पिक्सेल, तीसरे के साथ 9 पिक्सेल, और आगे बढ़ते हैं।

मैं एक नया jsfiddle बना लिया है कुछ चीजें बदल रहा है:

1 - अलग दो setIntervals।

2 - एनीमेशन फ़ंक्शन को एनीमेशन फ़ंक्शन पर ले जाएं।

3 - एनीमेशन फ़ंक्शन में बक्से को हटाने को ले जाएं।

4 - विधि विधि prototype से परहेज करने के लिए सीधे कार्य करें।

5 - एनीमेशन समाप्त होने पर animatesetInterval साफ़ करें।

6 - सुनिश्चित करें कि सभी बॉक्स यादृच्छिक मानों के लिए c_wdh - width of the boxes का उपयोग कर कैनवास के अंदर खींचे जाते हैं।

यहां आपके पास नया jsfiddle है।