HTML5 Canvas filltext和font-face

Question

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

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

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

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

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

Answer 1

使用这个技巧并将onerror事件绑定到Image元素。

\n\n

此处演示： http: //jsfiddle.net/g6LyK/ \xe2\x80\x94 适用于最新的 Chrome。

\n\n

var canvas = document.getElementById(\'canvas\');\nvar ctx = canvas.getContext(\'2d\');\n\nvar link = document.createElement(\'link\');\nlink.rel = \'stylesheet\';\nlink.type = \'text/css\';\nlink.href = \'http://fonts.googleapis.com/css?family=Vast+Shadow\';\ndocument.getElementsByTagName(\'head\')[0].appendChild(link);\n\n// Trick from /sf/ask/184507011/\nvar image = new Image;\nimage.src = link.href;\nimage.onerror = function() {\n    ctx.font = \'50px "Vast Shadow"\';\n    ctx.textBaseline = \'top\';\n    ctx.fillText(\'Hello!\', 20, 10);\n};\n

\n