HTML5 Canvas filltext和font-face

Question

一直在寻找stackoverflow和谷歌的方法来解决这个问题我有一个解决方案没有多少运气。

发生的事情是我的font-face字体没有在正确的时间加载。 我发生的是我有一个html5画布和javascript我在其中绘制一些带有填充文本的简单圆圈。 现在圆圈正在绘制，但文本本身是错误的字体。

我假设原因是因为字体是最后加载的，它只是选择默认字体。

现在我的问题是......有没有办法可以延迟绘制画布对象，直到加载字体？ 这样字体就可以使用了，它会将正确的字体分配给画布对象。

我应该指出，我有一个index.php文件，其中包含我的其他php文件，其中实际上正在绘制javascript和画布。

Answer 1

使用此技巧并将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

根据这个问题的答案 ，您可能需要监听onreadystatechange事件，检查document.readystate ==='complete'。