Как нарисовать Font Awesome Icons на HTML-холсте [Версия <5]

Как нарисовать символы Font Awesome (глифы иконок) на холсте html5? Я использую старую версию Font Awesome.

Как я могу оформить эти нарисованные символы?

<script>

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.font = '';
    context.fillText();

</script>

язык: lang-html

<canvas id="myCanvas" class="canvas" width="500" height="500" ></canvas>html>

<script>

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.font = '';
    context.fillText();

</script>

язык: lang-html

<canvas id="myCanvas" class="canvas" width="500" height="500" ></canvas>

Ответы

Ответ 1

введите описание изображения здесь

Здесь, как рисовать шрифты Awsome шрифта на холсте html5:

  • Ссылка в шрифте Awesome:

    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

  • Задайте шрифт контекста шрифтом Awesome:

    // set the canvas context font-size and font-face
context.font='14px FontAwesome';

  • Нарисуйте один из символов шрифта Awesome на холсте:

    // specify the desired character code with the Unicode prefix (\u) 
context.fillText('\uF047',20,50);

Здесь пример кода и демонстрационный пример:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

ctx.font='12px verdana';
ctx.fillText('Please wait for Font Awesome to load...',20,30);

// give font awesome time to load
setTimeout(start,2000);

function start(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.font='30px FontAwesome';
  ctx.fillText('\uF047',20,50);
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<h4>Font Awesome glyph drawn onto html5 canvas</h4>
<canvas id="canvas" width=300 height=100></canvas>

Ответ 2

как использовать значки шрифтов (шрифт Awesome) в html-холсте

вы можете проверить файл font.sss и узнать, какой код был использован для каждого значка.

Например: если вы видите файл для кода, используемого для получения значка fa-info-circle, его как ниже

.fa-info-circle:before {
  content: "\f05a";
}

Итак, попробуйте context.font = '\uf05a';//это даст вам fa-info-circle. И не забудьте добавить \u перед кодом. Также вы должны указать семейство шрифтов как FontAWsome