Hoạt ảnh canvas Html5 không hoạt động bình thường

Question

Tôi đang cố gắng tạo hoạt ảnh trong canvas. Lần đầu tiên nó hoạt động tốt nhưng khi một phần tử mới được thêm vào thông qua setTimeout, tất cả tốc độ của phần tử đều tăng lên. Bất cứ ai có thể cho tôi biết lý do tại sao tốc độ này đang tăng lên. 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

Tôi sẽ cố gắng giải thích cho bạn lý do hoạt ảnh được tăng tốc. Mỗi lần rendorBloonsetInterval được gọi là một setInterval mới được tạo. Các bước tiếp theo giải thích quá trình:

1 - chạy Trước rendorBloonsetInterval (1 giây):

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

2 - chạy thứ hai của rendorBloonsetInterval (2 giây):

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

3 - Lần chạy thứ ba của rendorBloonsetInterval (3 giây):

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

4 - ... Tiếp tục 10 lần

Trong mọi rendorBloon thực hiện, một mới setInterval được tạo ra và mỗi setInterval thực hiện phương pháp drawImage mà di chuyển hình ảnh 3 pixel trên. Khi bạn xóa rendorBloon setInterval, bạn sẽ có 10 chức năng cố di chuyển mỗi hộp. Kết quả: các hộp di chuyển 3 pixel với lần lặp đầu tiên, 6 pixel với lần thứ hai, 9 pixel với điểm thứ ba và tiếp tục.

tôi đã tạo ra một mới jsfiddle thay đổi một số điều:

1 - Tách hai setIntervals.

2 - Di chuyển logic hoạt ảnh sang chức năng hoạt ảnh.

3 - Di chuyển việc xóa các hộp sang chức năng hoạt ảnh.

4 - Tạo phương thức drawImage trực tiếp trong chức năng createBloon tránh prototype.

5 - Xóa animatesetInterval khi hoạt ảnh kết thúc.

6 - Đảm bảo rằng tất cả các hộp được vẽ bên trong canvas sử dụng c_wdh - width of the boxes cho các giá trị ngẫu nhiên.

Tại đây, bạn có jsfiddle mới.