Question

我想在画布上绘制fontawesome图标。

以下是我的代码：

<canvas id="canvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>

<script>
    var content = '\uF006';
    var context = document.getElementById('canvas').getContext('2d');
    context.font = '48px Material Design Icons';
    context.fillText(content, 100, 100);
    context.strokeText(content, 100, 100);
</script>

我已导入字体文件并将其链接。但它不起作用： it just show a rectangle which is empty.

你可以告诉我为什么吗？

一个有趣的事情是，当我链接fontawesome版本4.5在线地址时它起作用：enter link description here

两个版本的区别在哪里？

Answer 1

除了@TanDuong正确的声明之外，你甚至需要将font-weight设置为900才能启动字体......

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');
canvas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

<canvas id="c"></canvas>

function (doc) {

// Leidse plein
// this is now fixed, but needs to be dynamic from the url params
center_latitude = 52.3648111;
center_longitude = 4.8810906;

// this is fixed, but also needs to be dynamic from the url params
radius  = 5;

// calc distance between centerpoint and userpoint
distance = Math.acos(
  Math.sin(doc.latitude * Math.PI / 180) * 
  Math.sin(center_latitude * Math.PI / 180) 
  + 
  Math.cos(doc.latitude * Math.PI / 180) * 
  Math.cos(center_latitude * Math.PI / 180) * 
  Math.cos((doc.longitude - center_longitude) * Math.PI / 180)) * 6371;

  // all poi's within 5km radius
  if(distance <= radius ) {
      emit([doc.title,doc.latitude,doc.longitude], distance);
  }

 }

Answer 2

在Font Awesome 5.你应该使用

context.font = '48px Font Awesome 5 Free'

在Font Awesome中4.您应该使用

context.font = '48px FontAwesome'

这是在FontAwesome上定义的。您可以搜索@font-face以查看Font Awesome 5中定义的字体名称

Answer 3

最后，我添加了一个webfontloader.js，这使它完美无缺！

    <script src="./webfontloader.js"></script>

可以在网上找到webfontloader.js文件。

如何在画布中绘制fontawesome（版本＆gt; = 5.0）？

我想在画布上绘制fontawesome图标。

3 个答案: