HTML5画布填充文字和字体-face

Question

我在StackOverflow和Google上寻找解决此问题的方法，但并未能成功。我的问题是我的字体文件没有在正确的时间加载。我现在使用HTML5 Canvas和JavaScript绘制简单的圆形，并在其中填充文本。圆形被绘制，但文本本身是错误的字体。

我认为原因是字体最后才加载，所以它只会选择默认字体。

我的问题是......有没有办法延迟绘制Canvas对象直到字体加载完成？这样，字体就可以准备好使用，并且将为Canvas对象分配正确的字体。

我需要指出的是，我有一个index.php文件，该文件包含实际绘制JavaScript和Canvas的其他php文件。

- Anks

---

一直在尝试许多不同的方法来使它工作，但似乎字体仍然在页面加载结束时加载。因此，画布filltext无法以正确的字体呈现。有什么想法吗？ - Anks

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://dev59.com/H3E85IYBdhLWcg3wvGKm
var image = new Image;
image.src = link.href;
image.onerror = function() {
    ctx.font = '50px "Vast Shadow"';
    ctx.textBaseline = 'top';
    ctx.fillText('Hello!', 20, 10);
};

- a paid nerd

---

这个方案是可行的，但是我使用javascript生成画布内容的方式似乎无法使其按照我需要的方式工作。我有一个包含多个字符串的数组，并且需要将每一个字符串写入到画布上的新图像中。它正在通过一个for循环进行遍历。你有什么建议吗？ - Anks

只要你的代码在“image.onerror”回调中执行，你就应该能够使用字体。尝试将你的循环放在那里。 - a paid nerd

Answer 2

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

- linqq