在大屏应用中,如果能充分使用font-awesome字体,不仅可以节省大量的图标设计时间,还能充分利用字体文件的矢量特性,轻松添加stroke与fill样式。
解决方法分为三步:
1.必须首先引入font-awesome样式文件;
2.在页面的HTML元素中隐藏所需要的字符内容
如下:
<!--必须设置字体,否则无法显示 -->
<!-- 编码转换规则参见HTML、CSS、JS Unicode字符互转-->
<h2 style="font-family:FontAwesome" id="h2">
 
</h2>
3.在JS文件中进行绘制,代码如下:
// 首先从页面上获取字体内容,直接绘制无效,能实现的关键点1
let content = document.getElementById('h2').textContent
// 获取画布
let context = document.getElementById('canvas').getContext('2d')
// 设置填充与描边
context.fillStyle = 'green'
context.strokeStyle = 'red'
// 设置字体,能实现的关键点2
context.font = '48px FontAwesome'
// 绘制内容
context.fillText(content, 10, 100)
context.strokeText(content, 10, 100)
最后生成的效果,如下所示。