【Canvas】字体图标一、 Unicode 字体符号绘制 / 兼容IE

在Canvas中使用字体图标主要整理了两大类方法，

第一种：

直接代码，备忘：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 800px;margin: 100px auto 20px;border: 1px solid #ccc;font-size: 30px;padding: 20px;}</style>
</head>
<body><!--这个主要用的是Unicode编码 ，从兼容性上来讲还是很强大的，不需要引入任何的CSS 或 js 文件-->
<!--因为canvas必须要IE9 以上才支持，所以画布里的东西兼容性也在IE9以上才行， -->
<!--div里面的文字 是任何浏览器都可以使用的--><div style="" id="d1"><span id="s1"> ☆</span><span id="s2">☃</span><span id="s3">❉</span><span id="s4">♚</span><span id="s5">❣</span></div><div><canvas id="canvas" width="1000"></canvas>
</div><!--右键搜狗输入法， 点击弹出框上的符号大全； 登录站长的转码工具页面进行转码： http://tool.chinaz.com/tools/unicode.aspx  ,-->
<!--或者也可以上网 搜索 “符号大全” 什么的，把符号复制到转码工具里面就行，然后点击ASCII 转 Unicode ，就能获取想要的Unicode码了--><script>function iconFont(id) {return document.getElementById(id).textContent;}var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var icon1 = iconFont("s1"),icon2 = iconFont("s2"),icon3 = iconFont("s3"),icon4 = iconFont("s4"),icon5 = iconFont("s5");ctx.fillStyle = '#1ABFFF';      //样式1ctx.font = '48px FontAwesome';  //  !!!设置字体， 字体可以随意//  绘制内容ctx.fillText(icon1, 10, 50);ctx.fillText(icon2, 70, 50);ctx.strokeStyle = '#FF5055';    //样式2ctx.strokeText(icon1, 170, 50);ctx.strokeText(icon2, 240, 50);ctx.strokeStyle = '#0000CC';    //样式3ctx.lineWidth=3;ctx.fillStyle = '#FFFF66';ctx.strokeText(icon3, 340, 50);ctx.strokeText(icon4, 410, 50);ctx.strokeText(icon5, 480, 50);ctx.fillText(icon3, 340, 50);ctx.fillText(icon4, 410, 50);ctx.fillText(icon5, 480, 50);</script>
</body>
</html>

！！！需要注意的是这个字体图标在不同浏览器下显示的效果有些不同，如下图：

另外附上个人获取这些Unicode编码的偷懒一点的方法：
右键搜狗输入法，点击弹出框上的符号大全；
登录站长的转码工具页面进行转码： http://tool.chinaz.com/tools/unicode.aspx ,
或者
也可以上网搜索关键字 “符号大全” 什么的，把符号复制到转码工具里面就行，然后点击ASCII 转 Unicode ，就能获取想要的Unicode码了

【Canvas】字体图标一、 Unicode 字体符号绘制 / 兼容IE相关推荐

在iOS应用中使用字体图标及制作字体库
做iOS开发的都知道,因为屏幕分辨率的问题,在iOS app 中都得放两套切图来支持retina屏和非retina屏幕,但是文字就不需要考虑分辨率的问题,所以可不可以将一些图片用文字来代替呢,省时省力 ...
css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标二.字体图标的好处三.字体图标用法四.字体图标格式介绍一.什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用 ...
html 字体图标转换工具,字体图标的制作方式
引言: 如今移动端页面越来越频繁,图标字体的应用也越来越广泛.废话少说,根据自己的实践,今天和大家一起分享两种将图标转换为字体的方法.欢迎大家拍砖! 方法一:SVG+icomoon(目前喜欢并推荐使用 ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
iconfont字体图标以及css字体图标在线制作和使用（推荐）
字体图标的制作和使用呢,也不一定非要自己去 https://icomoon.io/ 网站制作,那样子貌似有点麻烦,那么这里给大家一种更简便的操作方式,方便快捷的制作并使用字体图标,同样的,我们还是离不 ...
使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标? 在说字体图标之前,我们先说一下图片,图片可以让我们的界面更加美丽,但是图片也是有缺点的,比如图片会增加总文件的大小,还会增加额外的HTTP请求,这都会降低网页的性能的.更重要的是图片不 ...
微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍一下如何 ...
html 字体图标转换工具,字体转换器
路由器之家网今天精心准备的是<字体转换器>,下面是详解! 如何将文字转换成语音用浮云合音软件可以,把文本上传到浮云合音软件上,然后一键进行转换,生成语音. 省时省力,效率高. 浮云合音软 ...
【web组件库系列】封装自己的字体图标库
封装自己的web字体图标库 CSDN:jcLee95 邮箱 :291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/deta ...
css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...

【Canvas】字体图标一、 Unicode 字体符号绘制 / 兼容IE

【Canvas】字体图标一、 Unicode 字体符号绘制 / 兼容IE相关推荐

最新文章

热门文章