在canvas中应用font-awesome字体

在大屏应用中，如果能充分使用font-awesome字体，不仅可以节省大量的图标设计时间，还能充分利用字体文件的矢量特性，轻松添加stroke与fill样式。

解决方法分为三步：
1.必须首先引入font-awesome样式文件；
2.在页面的HTML元素中隐藏所需要的字符内容
如下：

<!--必须设置字体，否则无法显示 --><!-- 编码转换规则参见HTML、CSS、JS Unicode字符互转--><h2 style="font-family:FontAwesome" id="h2">    &#61554;&nbsp;&#62137;</h2>

3.在JS文件中进行绘制，代码如下：

//  首先从页面上获取字体内容，直接绘制无效，能实现的关键点1let content = document.getElementById('h2').textContent//  获取画布let context = document.getElementById('canvas').getContext('2d')//  设置填充与描边context.fillStyle = 'green'context.strokeStyle = 'red'//  设置字体，能实现的关键点2context.font = '48px FontAwesome'//  绘制内容context.fillText(content, 10, 100)context.strokeText(content, 10, 100)

最后生成的效果，如下所示。