如何在画布中使用材质图标？

Question

如何在画布中使用材质图标？

对于fontawesome，您可以添加字体并使用图标字符代码，例如：

ctx.font='30px FontAwesome';
ctx.fillText('\uF047',20,50);

但是Google的材质图标呢？我找不到在线解决方案。

Answer 1

只要您已经加载了字体，就可以像FontAwesome一样使用它。只需使用图标名称即可代替unicode字符串。

context.font = '24px Material Icons';
ctx.fillText('calendar_today',20,50);

Answer 2

如果您还在寻找，我在这里找到了答案：

How to render icon fonts on HTML canvas and Material Design icon fonts in particular?

简而言之：它使用FontFace对象加载材质图标。然后，您可以使用画布上下文中的fillText方法绘制图标。