HTML5 Canvas 填充文本和字体

Posted 2023-03-05

【中文标题】HTML5 Canvas 填充文本和字体

【英文标题】：HTML5 Canvas filltext and font-face

【发布时间】：2012-01-02 04:39:00

【问题描述】：

一直在寻找 *** 和 google 的方法来解决我遇到的这个问题，但没有太多的解决方案。

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

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

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

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

【问题讨论】：

一直在尝试许多不同的方法来使其正常工作，但似乎在页面加载结束时字体仍在加载。所以画布填充文本不会以正确的字体呈现。有什么想法吗？

【参考方案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://***.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循环。有什么建议吗？

只要您的代码在image.onerror 回调中执行，您就应该能够使用该字体。试着把你的循环放在那里。

【参考方案2】：

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