HTML5 Canvas filltext và font-face

Question

Đã tìm kiếm xung quanh stackoverflow và google để tìm cách giải quyết vấn đề này, nhưng có havent đã có nhiều may mắn với một giải pháp.

Điều đang xảy ra là phông chữ phông chữ của tôi không tải vào đúng thời điểm. Những gì tôi đã xảy ra là tôi có một vải html5 và javascript, nơi tôi vẽ một số vòng tròn đơn giản với điền văn bản bên trong chúng. Bây giờ các vòng tròn đang được rút ra nhưng bản thân văn bản là phông chữ sai.

Tôi giả sử lý do là vì phông chữ đang được tải cuối cùng và nó chỉ chọn phông chữ mặc định.

Bây giờ câu hỏi của tôi là ... có cách nào tôi có thể trì hoãn các đối tượng canvas được vẽ cho đến khi phông chữ được tải không? Bằng cách này, phông chữ sẽ sẵn sàng để sử dụng và nó sẽ gán các phông chữ phù hợp cho các đối tượng canvas.

Tôi nên chỉ ra rằng tôi có tệp index.php bao gồm tệp php khác của tôi nơi javascript và canvas thực sự được vẽ.

Answer 1

Sử dụng this trick và liên kết sự kiện onerror với yếu tố Image.

Demo tại đây: http://jsfiddle.net/g6LyK/ - hoạt động trên Chrome mới nhất.

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var link = document.createElement('link'); 
link.rel = 'stylesheet'; 
link.type = 'text/css'; 
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'; 
document.getElementsByTagName('head')[0].appendChild(link); 

// Trick from https://stackoverflow.com/questions/2635814/ 
var image = new Image; 
image.src = link.href; 
image.onerror = function() { 
    ctx.font = '50px "Vast Shadow"'; 
    ctx.textBaseline = 'top'; 
    ctx.fillText('Hello!', 20, 10); 
}; 

Answer 2

According to an answer to this question, bạn có thể cần nghe sự kiện onreadystatechange, kiểm tra xem document.readystate === 'complete' chưa.