html5 - 请问利用font-face定义的字体怎么在canvas里应用？

Question

请问利用font-face定义的字体怎么在canvas里应用？

高洛峰 · Answer

<pre><code><style>
    @フォントフェイス {
      font-family: "_________" //フォント名に下線を引きます。
      src: url("_________"); //下線フォントファイル
    }
</スタイル>

<スクリプトタイプ="text/javascript">
    関数描画() {
        var ctx = document.getElementById('canvas').getContext('2d');
        var img = 新しい画像();
        img.onload = function(){
          ctx.drawImage(img,0,0);
          ctx.beginPath();
          ctx.fillStyle = '#000';
          ctx.font = "60px オートマニア";
          ctx.textBaseline = 'トップ';
          ctx.fillText('このフォントの見た目', 0, 5);
          ctx.ストローク();
        }
        img.src = 'img.png';
      }
</スクリプト>

<input onclick="draw()" type="button" value="test" />
<canvas id="canvas" width="800" height="800"></canvas>
</code></pre>
<p>ただし、フォント ファイルの読み込みが遅すぎるため、キャンバスでカスタム フォントを使用することはお勧めできません。 。 </p>

伊谢尔伦 · Answer

1. フォントが有効になるように、フォントがダウンロードされるまで待ってからキャンバスをレンダリングする必要があります。
2. キャンバス内で参照されるフォントは、タグ (span、p など) によって参照される必要があります。ドキュメントストリームでフォントを変更してください!!これが最大の落とし穴です!!!

html5 - 请问利用font-face定义的字体怎么在canvas里应用？

全員に返信(2)返信します