有没有办法从html5 canvas中访问字体图标? [英] Is there a way to access fonts icons from html5 canvas?

问题描述

我是html5 canvas的新手.

I am new to html5 canvas.

我需要将fonticons( fontawesome )显示为图像. 这可能吗?谢谢

I need to display fonticons (fontawesome) as images. Is this possible? Thanks

推荐答案

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

It is indeed possible, though it is a bit cumbersome.

由于Canvas会使用后备字体绘制(如果尚未准备好实际字体)，并且由于字体是延迟加载的，因此您需要保留渲染直到字体准备就绪.使用Google/Typekit的Web字体加载器( https://github.com/typekit/webfontloader)

Since Canvas will draw with a fallback font if the actual font it not yet ready, and since fonts are lazy loaded you will need to hold of rendering until the font is ready. This should be possible using something like Google/Typekit's Web Font Loader (https://github.com/typekit/webfontloader)

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

Once the font is ready, you can draw it in canvas as any other string, something like

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

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

The biggest challenge is that you have to remap all the symbols in Font Awesome, the their JavaScript char representations.

实际上可以使用名称来计算CSS规则

This can actually be done using the name, by calcualting CSS rules

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元素不是一个好主意)

To improve performance, FA icons should be cached, especially if the Canvas is redrawn often (adding and removing a lot of DOM elements is not a good idea when trying to reach 60 fps)

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和无polyfill的Promises)

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 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);
});

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

这篇关于有没有办法从html5 canvas中访问字体图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！