如何从FontAwesome在Canvas元素上绘制字形

如何从FontAwesome在Canvas元素上绘制字形

本文介绍了如何从FontAwesome在Canvas元素上绘制字形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在其CSS文件中指定字形,如下所示:

FontAwesome specifies glyphs in its CSS file like so:

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure
    screen readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }

我试图将图标从这种字体渲染到canvas元素,访问这些字形。

I am trying to render icons from this font to a canvas element but can't see how to access these glyphs.

ctx.font = "40px FontAwesome";
ctx.fillText("\f000",20,20); // no cigar

如何在JavaScript字符串中指定这些字形?

How do I specify these glyphs in JavaScript strings?

推荐答案

您应该使用:

ctx.fillText(String.fromCharCode("0xf000"), 20, 20);

或Unicode转义的此语法:

or this syntax for Unicode escapes :

ctx.fillText("\uf000", 20, 20);

这篇关于如何从FontAwesome在Canvas元素上绘制字形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-23 10:21