Question

我试图在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>

Answer 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>

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

1 个答案: