为什么我不能在画布上使用 fontawesome unicode 图标？答案

【问题标题】：Why am I not able to use fontawesome unicode icons on canvas?为什么我不能在画布上使用 fontawesome unicode 图标？
【发布时间】：2018-09-13 14:30:16
【问题描述】：

我正在尝试在 Canvas 上绘制 Unicode FontAwesome 图标，但我看到的结果（如下）并不完全符合我的预期。我如何正确绘制这些？我从 FontAwesome 网页获得了 Unicode。例如https://fontawesome.com/icons/500px?style=brands

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "15px FontAwesome";
ctx.fillStyle = "black";
ctx.fillText('\uf0ac', 170, 55);

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<canvas id="myCanvas"></canvas></body>

【问题讨论】：

draw font awesome 看看这篇文章。
我尝试添加 4 秒的超时时间（意味着将绘图部分包装在提供给 setTimeout() 的函数中），但得到的结果相同。 @TiisetsoTjabane
问题在于刷新画布。

标签： javascript html canvas

【解决方案1】：

问题很可能是在加载字体后刷新画布。

在这个post 中，他们提供了更好的基于事件的解决方案。

但为了表达我的观点，我使用了一个不太优雅的解决方案，即setinterval

您可以在重绘字体后停止计时器。

$(function(){    
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw,ch;
    
    setInterval(()=>{
        var ctx=canvas.getContext("2d");
        ctx.clearRect(0,0,300,300);
        ctx.font='48px fontawesome';
        ctx.fillText('\uf0ac',20,75);
    },1000)
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<head>
</head>
<body>
    <h4>Font Awesome glyphs drawn onto html5 canvas</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>

【讨论】：

怎么把fontAwesome链接改成下面的，还是不行？我需要使用一些版本 5 图标。