Canvas HTML5: Nhận sự kiện khi vẽ xong

Question

Tôi đang vẽ hình ảnh vào phần tử canvas. Sau đó tôi có mã phụ thuộc vào quá trình này được hoàn thành. Mã của tôi trông giống như sau:

var myContext = myCanvasElement.getContext('2d'), 
    myImg = new Image(); 

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
}; 

myImg.src = "someImage.png"; 

Vì vậy, bây giờ, tôi muốn được thông báo khi drawImage được thực hiện. Tôi đã kiểm tra spec nhưng tôi không thể tìm thấy một sự kiện hoặc khả năng để vượt qua một chức năng gọi lại. Cho đến nay tôi chỉ cần thiết lập một thời gian chờ, nhưng điều này rõ ràng là không phải là rất bền vững. Làm thế nào để bạn giải quyết vấn đề này?

Answer 1

Giống như hầu như tất cả các chức năng Javascript, drawImage là đồng bộ.

Tức là, nó sẽ chỉ trở lại sau khi thực sự đã thực hiện những gì nó phải làm.

Answer 2

Bạn đã có sự kiện khi tải hình ảnh và bạn làm một việc (vẽ). Tại sao không làm khác và gọi chức năng mà sẽ làm bất cứ điều gì nó là bạn muốn thực hiện sau khi drawImage? Theo nghĩa đen chỉ:

myImg.onload = function() { 
    myContext.drawImage(containerImg, 0, 0, 300, 300); 
    notify(); // guaranteed to be called after drawImage 
}; 

Answer 3

Jef Claes giải thích nó khá tốt on his website:

trình duyệt tải hình ảnh không đồng bộ trong khi kịch bản đã được giải thích và thực thi. Nếu hình ảnh không được tải đầy đủ, canvas sẽ không hiển thị được.

May mắn thay, điều này không khó giải quyết. Chúng tôi chỉ phải chờ để bắt đầu vẽ cho đến khi chúng tôi nhận được một cuộc gọi lại từ hình ảnh, thông báo việc tải đã hoàn tất.

<script type="text/javascript">   
window.addEventListener("load", draw, true); 

function draw(){          
    var img = new Image(); 
    img.src = "http://3.bp.blogspot.com/_0sKGHtXHSes/TPt5KD-xQDI/AAAAAAAAA0s/udx3iWAzUeo/s1600/aspnethomepageplusdevtools.PNG";     
    img.onload = function(){ 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d');  

     context.drawImage(img, 0, 0);   
    };    
}