您现在的位置：首页 >> 前端 >> 内容

在canvas中应用font-awesome字体

时间：2016/12/22 9:15:19 点击：

　　核心提示：在大屏应用中，如果能充分使用font-awesome字体，不仅可以节省大量的图标设计时间，还能充分利用字体文件的矢量特性，轻松添加stroke与fill样式。解决方法分为三步：1.必须首先引入font...

在大屏应用中，如果能充分使用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文件中进行绘制，代码如下：

//  首先从页面上获取字体内容，直接绘制无效，能实现的关键点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)

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