javascript - 在 Canvas 上显示 Font Awesome 字符

Question

我刚刚找到了这个codepen我想知道是否可以通过用 font-awesome 中的随机字符替换星星粒子来重用此代码字体。

我只知道他就是在这里画星星的:

Draw: function() {
context.strokeStyle = this.color;
context.fillStyle = this.color;
context.save();
context.beginPath();
context.translate(this.x, this.y);
context.moveTo(0, -this.diameter);

for (var i = 0; i < 7; i++)
{
  context.rotate(Math.PI / 7);
  context.lineTo(0, -(this.diameter / 2));
  context.rotate(Math.PI / 7);
  context.lineTo(0, -this.diameter);
}

if(this.id % 2 == 0) {
  context.stroke();
} else {
  context.fill();
}

context.closePath();
context.restore();
  }

关于如何实现这一目标有什么想法吗？

Answer 1

这实际上比他做的要容易。他使用 Canvas ，因此可以使用 canvas.fillText() 方法在其上绘制文本。

用此替换绘图函数，以仅绘制汽车。

  Draw: function() {
    context.font = "30px FontAwesome";
    context.fillStyle = this.color;
    context.strokeStyle = this.color;
    if(this.id % 2 == 0) {
      context.fillText('\uf1b9',this.x, this.y);
    } else {
      context.strokeText('\uf1b9',this.x, this.y);
    }
  }