フォントを表示する

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関数をこれに置き換えます。

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