Canvas 绘制字体图标库

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/ – 这个暂时还没有开始用，记录一下