有没有办法从html5 canvas中访问字体图标？

Question

我是html5 canvas的新手。

我需要将fonticons（fontawesome）显示为图像。这可能吗？谢谢

Answer 1

确实有可能，尽管有点麻烦。

由于Canvas会在尚未准备好实际字体的情况下使用后备字体进行绘制，并且由于字体是延迟加载的，因此您需要保留渲染，直到字体准备就绪为止。应该可以使用Google / Typekit的Web字体加载器（https://github.com/typekit/webfontloader）之类的东西来实现

字体准备好后，您可以像其他字符串一样在画布上绘制它，例如

var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px FontAwesome';
  ctx.fillText(String.fromCharCode(61449), 10, 50);

最大的挑战是您必须重新映射Font Awesome中的所有符号，它们是JavaScript char表示形式。

编辑：

实际上可以使用名称通过计算CSS规则来完成

getFAChar = function (name) {
    var elm = document.createElement('i');
    elm.className = 'fa fa-' + name;
    elm.style.display = 'none';
    document.body.appendChild(elm);
    var content = window.getComputedStyle(
        elm, ':before'
    ).getPropertyValue('content')
    document.body.removeChild(elm);
    return content;
};

var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px FontAwesome';
  ctx.fillText(getFAChar('bed'), 10, 50)

编辑：

为了提高性能，应该缓存FA图标，尤其是在经常重绘Canvas的情况下（尝试达到60 fps时添加和删除大量DOM元素不是一个好主意）

var FontAwesome = (function () {
    var me = {},
        FACache = {};

    function find (name) {
        var elm = document.createElement('i');
        elm.className = 'fa fa-' + name;
        elm.style.display = 'none';
        document.body.appendChild(elm);
        var content = window.getComputedStyle(
            elm, ':before'
        ).getPropertyValue('content')
        document.body.removeChild(elm);
        return content;
    };

    me.get = function (name) {
        if (!!FACache[name]) return FACache[name];
        var c = find(name);
        FACache[name] = c;
        return c;
    };
    return me;
}());

var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px FontAwesome';
  ctx.fillText(FontAwesome.get('bed'), 10, 50);

编辑

Complete example using deferred render, auto css injection and mapping of css chars, though only tested in Chrome (Uses font loading API and Promises without polyfill)

var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px FontAwesome';
  ctx.fillText(String.fromCharCode(61449), 10, 50);

getFAChar = function (name) {
    var elm = document.createElement('i');
    elm.className = 'fa fa-' + name;
    elm.style.display = 'none';
    document.body.appendChild(elm);
    var content = window.getComputedStyle(
        elm, ':before'
    ).getPropertyValue('content')
    document.body.removeChild(elm);
    return content;
};

var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px FontAwesome';
  ctx.fillText(getFAChar('bed'), 10, 50)