在 canvas 上显示 Font Awesome 字符
Display Font Awesome characters on a canvas
我刚找到这个 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();
}
有什么办法可以实现吗?
这实际上比他做的更容易。他用的是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);
}
}
我刚找到这个 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();
}
有什么办法可以实现吗?
这实际上比他做的更容易。他用的是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);
}
}