HTML5 Canvas filltext 및 font-face

Question

이 문제를 해결하는 방법에 대해 stackoverflow와 google을 둘러 보았지만 해결책이있는 행운이별로 없습니다.

내 폰트 페이스 글꼴이 적시에로드되지 않습니다. 내가 겪고있는 것은 html5 캔버스와 자바 스크립트가있는 곳으로 그 안에 텍스트를 채우는 간단한 원을 그리는 곳입니다. 이제 서클이 그려 지지만 텍스트 자체가 잘못된 서체입니다.

나는 글꼴이 마지막으로로드되고 기본 글꼴 만 선택하기 때문에 그 이유가 있다고 가정합니다.

이제 내 질문은 ... 글꼴이로드 될 때까지 그려지는 캔버스 개체를 지연시킬 수있는 방법이 있습니까? 이렇게하면 글꼴을 사용할 준비가되고 캔바스 개체에 올바른 글꼴이 지정됩니다.

필자는 자바 스크립트와 캔버스가 실제로 그려지는 다른 PHP 파일을 포함하는 index.php 파일이 있음을 지적해야합니다.

Answer 1

this trick을 사용하고 onerror 이벤트를 Image 요소에 바인드하십시오.

데모 : http://jsfiddle.net/g6LyK/ - 최신 Chrome에서 작동합니다.

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 이벤트가 발생하면 onreadystatechange 이벤트를 수신하여 document.readystate === 'complete'인지 확인해야 할 수 있습니다.