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

2022-01-17 00:00:00 javascript html5-canvas font-awesome

如何在 html5 画布上绘制 Font Awesome 字符(图标字形)?我正在使用旧版本的 Font Awesome.

How can I draw Font Awesome characters (Icons Glyphs) onto html5 canvas? I am using an older version of Font Awesome.

如何设置这些绘制字符的样式?

How can I style those drawn characters?

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

推荐答案

以下是在 html5 画布上绘制 Font Awsome 字形的方法:

  1. Font Awesome 中的链接:

  1. Link in Font Awesome:

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

  • 将上下文字体设置为 Font Awesome:

  • Set the context font to Font Awesome:

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

  • 在画布上绘制一个 Font Awesome 字符:

  • 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.

    And as @Kaiido comments, you can cause the browser to start loading FontAwesome by setting the font-family:fontawesome on the canvas element (or another element).

    演示展示了如何即时"加载自定义字体(包括 FontAwesome).

    The demo shows how to load custom fonts (including FontAwesome) "on-the-fly".

    [补充:一个 FontAwesome 加载功能]

    与 img 一样，字体是异步加载的，因此您必须等待它们完全加载，然后才能在画布上使用它们进行绘制.但与 imgs 不同的是，字体没有内置的 .onload 方法来告诉我们何时完全加载.

    Like img's, fonts load asynchronously so you must wait for them to fully load before trying to draw with them on canvas. But unlike imgs, fonts don't have a built-in .onload method to tell us when they are fully loaded.

    当 FontAwesome 完全加载并准备好在画布上 fillText 时，您可以使用以下解决方法 onload 函数触发回调:

    Here's a workaround onload function you can use to trigger a callback when FontAwesome has fully loaded and is ready to fillText on the canvas:

    <!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('uF064uF065 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>

    相关文章