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('&amp;') !== -1){Unicode = Unicode.replace('&amp;','&')}if(Unicode.indexOf('&amp') !== -1){Unicode = Unicode.replace('&amp','&')}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/ – 这个暂时还没有开始用，记录一下

Canvas 绘制字体图标库相关推荐

【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
云炬Android开发笔记 3-2字体图标库集成与封装
1.项目:android-iconify点此链接到Github 这是一个字体图标库,用字体来代替很多图片. Android开发经常将很多本地图标放在drawable和mipmap文件夹下,这样有一些坏 ...
制作自己的字体图标库
你可能使用过或听说过各种字体图标库,比如fontawesome, glyphicon等,想过制作一个属于自己的字体图标库吗?今天就试着做一个. 参考:https://justforuse.github ...
Android肝帝战纪之字体图标库(iconify)的简单使用
字体图标库(iconify)的简单使用本文介绍字体图标库简单的封装和使用(以集成Fontawesome为例): Iconify的GIithub链接点此链接到Github 导入依赖 //在app级别 ...
字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
如何使用阿里巴巴字体图标库
1. 阿里巴巴字体图标库官网:http://www.iconfont.cn/ 2.选择自己要用的字体图标,下载到本地. 3.在页面中引用 iconfont.css 这个样式 4.<i class ...
使用多个icon 字体图标库样式冲突问题
场景:项目中使用的UI样式库中包含一套icon 字体图标库,自定义一套字体图标库,在应用的时候,出现冲突,导致一方字体图标库无法显示或者显示不正常,原因:字体命名冲突,样式命名冲突,导致字体图标显示不 ...
canvas绘制字体时遇到Bookshelf Symbol 7字体bug
JS使用canvas绘制字体时,如果像以下代码设置字体为Bookshelf Symbol 7时会出现bug,不显示实际字体效果 let font_txt = document.getElementBy ...
uni-app引入阿里字体图标库
1.官方地址 2.阿里巴巴字体图标库使用方法 (1).注册账号 (2).创建项目 (3).找到喜欢的图标 (4).将自己喜欢的图标加入到项目中去 (5).生成代码并下载到本地 (6).将iconfon ...

Canvas 绘制字体图标库

1.首先，你要引入一个字体图标库 – iconfont 阿里的字体图标库

2.新建一个canvas

Canvas 绘制字体图标库相关推荐

最新文章

热门文章