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

小鱼儿 2022-02-24 16:52 725阅读 0赞

![在这里插入图片描述][70]

在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>
    
    
    
    
    
    <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>
    
    
    
    
    <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';      //样式1
    
        ctx.font = '48px FontAwesome';  //  !!!设置字体， 字体可以随意
        //  绘制内容
        ctx.fillText(icon1, 10, 50);
        ctx.fillText(icon2, 70, 50);
    
    
        ctx.strokeStyle = '#FF5055';    //样式2
        ctx.strokeText(icon1, 170, 50);
        ctx.strokeText(icon2, 240, 50);
    
    
        ctx.strokeStyle = '#0000CC';    //样式3
        ctx.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>

--------------------

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][20190405151723199.gif]

[70]: /images/20220224/02ab68ea2eb845d9bd1d461de729010e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70]: /images/20220224/a2d695a241ec4140a366ac313d82f7f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVkb21WZW5seQ_size_16_color_FFFFFF_t_70 1]: /images/20220224/be5ee81df789483aa8711e73f595c1e2.png
[http_tool.chinaz.com_tools_unicode.aspx]: http://tool.chinaz.com/tools/unicode.aspx
[20190405151723199.gif]: /images/20220224/06b45aa6dd4a42948c4495db63f71a4e.png