为什么我无法在画布上使用字体惊人的unicode图标？

Question

I'm trying to draw Unicode FontAwesome icons on Canvas, but the result I see (below) is not exactly what I expected. 我正在尝试在Canvas上绘制Unicode FontAwesome图标，但是我看到的结果（如下）与我期望的不完全相同。 How do I draw these correctly? 如何正确绘制这些？ I got the Unicode from the FontAwesome webpage. 我从FontAwesome网页获得了Unicode。 For example https://fontawesome.com/icons/500px?style=brands 例如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('\', 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>

Answer 1

The problem is most likely with refreshing the canvas after the fonts have been loaded. 该问题最有可能是在加载字体后刷新画布。

In this post they provide a better event based solution. 在这篇文章中，他们提供了一个更好的基于事件的解决方案。

but to get my point across I have used a less elegant solution with using setinterval 但是为了阐明我的观点，我使用了setinterval不太优雅的解决方案

you can stop the timer after your fonts have been redrawn. 您可以在字体重绘后停止计时器。

 $(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('\',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>

为什么我无法在画布上使用字体惊人的unicode图标？

问题描述

1 个解决方案

解决方案1
2 2018-09-13 06:19:52

为什么我无法在画布上使用字体惊人的unicode图标？

问题描述

1 个解决方案

解决方案1 2 2018-09-13 06:19:52

解决方案1
2 2018-09-13 06:19:52