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.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);
    }
  }

在画布上显示字体真棒字符

1 个答案: