如何在HTML5 Canvas上绘制Font Awesome双色调图标？

要在Canvas上实现双色调图标的分层着色，核心是利用Font Awesome Duotone字体的双层字形机制，通过分别绘制主次两层并设置不同颜色来实现效果，步骤如下：

1. 加载Duotone字体 #

首先确保页面引入Font Awesome的Duotone字体包，比如通过CDN引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

2. 等待字体加载完成 #

Canvas绘制依赖字体文件加载完成，否则会显示默认字体，因此需要通过document.fonts.ready等待字体就绪：

3. 分层绘制双色调图标 #

Duotone字体支持通过fontVariationSettings切换主次两层，同一个图标Unicode可以分别渲染出次级（浅色背景）和主级（深色前景）部分：

document.fonts.ready.then(() => {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  const fontSize = 60;
  const iconUnicode = '\uF047'; // 示例为Edit图标的Unicode
  const drawX = 50;
  const drawY = 80;

  // 绘制次级层（浅色部分）
  ctx.font = `${fontSize}px "Font Awesome 6 Duotone"`;
  ctx.fillStyle = '#cccccc'; // 设置次色
  ctx.fontVariationSettings = '"FILL" 0'; // 切换到次级字形
  ctx.fillText(iconUnicode, drawX, drawY);

  // 绘制主级层（深色部分）
  ctx.fillStyle = '#2c3e50'; // 设置主色
  ctx.fontVariationSettings = '"FILL" 1'; // 切换到主级字形
  ctx.fillText(iconUnicode, drawX, drawY);
});

关键说明 #

• 你原来的代码使用的是FontAwesome（Solid字体），而双色调需要指定Duotone字体名称："Font Awesome 6 Duotone"（注意名称中的空格和引号）。
• 每个Duotone图标的Unicode可以在Font Awesome官方图标页的Duotone标签下找到。
• 先绘制次级层再绘制主级层，主级层会自然覆盖次级层的对应区域，形成双色调效果。

内容的提问来源于stack exchange，提问作者Brack