如何在HTML画布上绘制Font Awesome图标 [版本<5]

Question

如何在HTML画布上绘制Font Awesome图标 [版本<5]

16

我该如何在HTML5画布上绘制Font Awesome字符（图标字形）？我正在使用较旧版本的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>

- Kanishk Pipariya

2个回答

5

如何在HTML画布中使用字体图标（Font Awesome）？

您可以检查fontawsome.css文件，并获取每个图标所使用的代码。

例如：如果您查看fa-info-circle图标的代码文件，如下所示

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

所以尝试使用 context.font = '\uf05a'; // 这将给你 fa-info-circle。记得在代码前加上 \u。同时，你需要指定字体族为 FontAWsome。

- Rajshekar Reddy

我没有在CSS中设置字体。我只是向他展示了在fontawesome.css文件中使用的图标的CSS代码。他只需要在自己的上下文中使用它，同时我在答案中提到了context.font。 - Rajshekar Reddy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

这里是如何在HTML5画布上绘制Font Awesome图标的方法：

Link in Font Awesome:

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

Set the context font to Font Awesome:

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

Draw one of the Font Awesome characters on the canvas:

// 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>

[补充：加载FontAwesome的另一种方法]

正如@Kaiido所评论的，您可以通过在画布元素（或其他元素）上设置font-family：fontawesome来使浏览器开始加载FontAwesome。

演示了如何“即时”加载自定义字体（包括FontAwesome）。

[补充：一个FontAwesome onload函数]

与img不同，字体异步加载，因此您必须等待它们完全加载后才能尝试在画布上绘制。但是，与img不同，字体没有内置的.onload方法告诉我们它们何时完全加载。

这是一个解决onload函数，您可以使用它来触发回调，当FontAwesome完全加载并准备好在画布上进行fillText时：

<!doctype html>
<html>
<head>
<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>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){

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

    AwesomeFontOnload(start,3000);

    function start(){
        ctx.font='48px fontawesome';
        ctx.fillText('\uF064\uF065 \uF0a5',20,75);
    }

    function AwesomeFontOnload(callback,failAfterMS){
        var c=document.createElement("canvas");
        var cctx=c.getContext("2d");
        var ccw,cch;
        var fontsize=36;
        var testCharacter='\uF047';
        ccw=c.width=fontsize*1.5;
        cch=c.height=fontsize*1.5;
        cctx.font=fontsize+'px fontawesome';
        cctx.textAlign='center';
        cctx.textBaseline='middle';
        var startCount=pixcount();
        var t1=performance.now();
        var failtime=t1+failAfterMS;
        //
        requestAnimationFrame(fontOnload);
        //
        function fontOnload(time){
            var currentCount=pixcount();
            if(time>failtime){
                alert('Font Awsome failed to load after '+failAfterMS+'ms.');
            }else if(currentCount==startCount){
                requestAnimationFrame(fontOnload);
            }else{
                callback();
            }
        }
        //
        function pixcount(){
            cctx.clearRect(0,0,ccw,cch);
            cctx.fillText(testCharacter,ccw/2,cch/2);
            var data=cctx.getImageData(0,0,ccw,cch).data;
            var count=0;
            for(var i=3;i<data.length;i+=4){
                if(data[i]>10){count++;}
            }
            return(count);
        }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Font Awesome glyphs drawn onto html5 canvas</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>