HTML5 Canvas filltext和font-face

问题描述：

查看周围的计算器和谷歌的方式来解决这个问题我有，但没有很多运气的解决方案。HTML5 Canvas filltext和font-face

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

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

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

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

一直在尝试许多不同的方法来获得这个工作，但它似乎字体仍然加载在页面加载结束时。所以canvas filltext不会使用正确的字体进行渲染。有什么想法吗？ – Anks

答

使用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://*.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); 
};

这是有效的，但是我有我的javascript生成画布内容的方式，我似乎无法按照我需要的方式工作。我有一个包含多个字符串的数组，并且需要将每个字符串写入画布上的新图像。它经历了一个for循环。有什么建议么？ – Anks

只要您的代码在'image.onerror'回调中执行，您应该可以使用该字体。试着把你的循环放在里面。 –

答

According to an answer to this question，您可能需要聆听onreadystatechange事件，检查document.readystate ==='complete'。

感谢发布，但似乎无法得到这个工作。 – Anks

HTML5 Canvas filltext和font-face

相关推荐