有没有办法从html5画布访问字体图标？

Question

我是html5画布的新手。

我需要将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);

修改

使用延迟渲染，自动css注入和css字符映射的完整示例，但仅在Chrome中测试（使用字体加载API和Promise而不使用polyfill）

＆＃13;

＆＃13;

var FontAwesome = function () {
	return new Promise(function (done, failed) {
		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)[1];
			FACache[name] = c;
			return c;
		};
		
		(function() {
			var l = document.createElement('link'); l.rel = 'stylesheet';
			l.onload = function () {
				document.fonts.load('10px FontAwesome')
					.then(function (e) { done(me); })
					.catch(failed);
			}
			l.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
			var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
		}());
	});
};

FontAwesome()
.then(function (fa) {
    // All set, and ready to render!
    var ctx = document.getElementById('canvas').getContext('2d');
        ctx.font = '48px FontAwesome';
        ctx.fillText(fa.get('bed'), 10, 50);
});

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

＆＃13;

＆＃13;