在 canvas 上显示 Font Awesome 字符

Question

我刚找到这个 codepen and I wondered if I could reuse this code by replacing the stars particles with random characters from the 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);
    }
  }

在 canvas 上显示 Font Awesome 字符

Display Font Awesome characters on a canvas

javascript

font-awesome