Pertanyaan Cara menggambar Font Ikon Keren ke kanvas html


Bagaimana saya bisa menggambar karakter Font Awesome (Ikon Glyphs) ke kanvas html5?

Bagaimana saya bisa menata karakter yang digambar itu?

<script>

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

</script>

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

bahasa: lang-html

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

6
2018-02-23 06:58


asal


Jawaban:


enter image description here

Berikut ini cara menggambar font Awsome glyphs pada kanvas HTML5:

  1. Tautan dalam Font Keren:

    <link rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    
  2. Setel font konteks ke Font Awesome:

    // set the canvas context's font-size and font-face
    context.font='14px FontAwesome';
    
  3. Gambar salah satu karakter Font Awesome di kanvas:

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

Berikut contoh kode dan Demo:

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>

[Tambahan: cara lain untuk memuat FontAwesome]

Dan sebagai komentar @Kaiido, Anda dapat menyebabkan browser mulai memuat FontAwesome dengan mengatur font-family:fontawesome pada elemen kanvas (atau elemen lain).

Demo ini menunjukkan cara memuat font kustom (termasuk FontAwesome) "on-the-fly".

[Tambahan: A FontAwesome fungsi onload]

Seperti img, font dimuat secara asinkron sehingga Anda harus menunggu untuk memuat penuh sebelum mencoba menggambar dengan mereka di kanvas. Tetapi tidak seperti imgs, font tidak memiliki built-in .onload metode untuk memberi tahu kami saat mereka dimuat penuh.

Berikut adalah fungsi onload workaround yang dapat Anda gunakan untuk memicu callback ketika FontAwesome telah dimuat penuh dan siap fillText di kanvas:

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

17
2018-02-23 08:40



cara menggunakan ikon font (Font Awesome) di kanvas html

Anda dapat memeriksa file .css fontawsome dan mendapatkan kode apa yang telah digunakan untuk setiap ikon.

Misalnya: Jika Anda melihat file untuk kode yang digunakan untuk mendapatkan ikon fa-info-circle, seperti di bawah ini

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

Jadi cobalah context.font = '\uf05a'; // ini akan memberimu fa-info-circle. Dan ingat untuk menambahkan \u  sebelum kode. Juga Anda perlu menyebutkan keluarga font sebagai FontAWsome


2
2018-02-23 07:07