根据类名绘制字体图标到画布上

Question

我希望能够：

1. 为任何给定的字体获取字体Awese5Unicode字符(fas fa-check-circle等.)
2. 将该unicode字符绘制到html5画布

我该怎么做呢？

Answer 1

要获得字体Awese5图标类的正确unicode字符和其他重要数据，并将其绘制到html5画布上：

// create an icon with the Font Awesome class name you want
const i = document.createElement('i');

i.setAttribute('class', 'fas fa-check-circle');
document.body.appendChild(i);

// get the styles for the icon you just made
const iStyles = window.getComputedStyle(i);
const iBeforeStyles = window.getComputedStyle(i, ':before');

const fontFamily = iStyles.getPropertyValue('font-family');
const fontWeight = iStyles.getPropertyValue('font-weight');
const fontSize = '40px'; // just to make things a little bigger...

const canvasFont = `${fontWeight} ${fontSize} ${fontFamily}`; // should be something like: '900 40px "Font Awesome 5 Pro"'
const icon = String.fromCodePoint(iBeforeStyles.getPropertyValue('content').codePointAt(1)); // codePointAt(1) because the first character is a double quote


const ctx = myCanvas.getContext('2d');

ctx.font = canvasFont;
ctx.fillStyle = 'red';
ctx.textAlign = 'center';
ctx.fillText(icon, myCanvas.width / 2, myCanvas.height / 2);

当您这样做，确保字体Awese5字体实际加载时，您做绘图。我在测试时犯了只画一次的错误，结果只出现了一个盒子。当图标加载时，它应该如下所示：

​

​