1.首先,你要引入一个字体图标库 – iconfont 阿里的字体图标库
将链接复制到浏览器,将获取到的css 代码复制到自己的项目 代码中
其他的不一一赘述,没有用过 iconfont 的 可以看 这里
2.新建一个canvas
3.主要代码
iconFont(Unicode = '',font = 'iconfont') {
context.beginPath();
let fontSize = this.drawHeight * (0.41) > 50 ? 50 : this.drawHeight * (0.41);
context.font=`${fontSize}px ${font}`;
// 将使用的图标的Unicode放在以下方式进行转义,便可以使用
//后台返回的字段进行了转义,需要进行反转义
if(Unicode.indexOf('&') !== -1){
Unicode = Unicode.replace('&','&')
}
if(Unicode.indexOf('&') !== -1){
Unicode = Unicode.replace('&','&')
}
var icon = eval('("'+`${Unicode}`.replace('&#x','\\u').replace(';','')+'")')
return icon;
},
context.fillText( this.iconFont(this.clipArtMsg.frontStart,'iconfont'),width/2 - wWidth.width/2 - 30,text_y_axis +fontSize/2);
上面涉及的变量,context 是canvas 画布,text_y_axis 是绘制时候的字体的大小,text_y_axis 是画布的高, text_y_axis 是绘制时候相关的字体的设置,clipArtMsg.frontStart 是获取的图标的Unicode的 值,width 是画布的宽,text_y_axis 是设置的纵向的对齐线的位置 ,这里主要是 记录一下这个方法,照抄代码可能麻烦会更多
绘制之后
修改颜色
使用字体图标的好处就是这样子,可以修改颜色,棒!!!!
使用FontAwesome — 参照地址
选择这个进行绘制
代码
context.fillText( this.iconFont('','FontAwesome'),width/2 - wWidth.width/2 - 30,text_y_axis +fontSize/2);
关于字体库的名称,在css文件中查看
新发现的字体 http://remixicon.com/ – 这个暂时还没有开始用,记录一下