Question

一直在寻找stackoverflow和谷歌的方法来解决这个问题即时通讯已经有了很多运气的解决方案。

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

我假设原因是因为字体最后被加载而且只是选择了默认字体。

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

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

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'。

HTML5 Canvas filltext和font-face

2 个答案: