如何在html画布上绘制字体真棒图标 [英] How to draw Font Awesome Icons onto html canvas
问题描述
如何将字体真棒字符（图标字形）绘制到html5画布上？
How can I draw Font Awesome characters (Icons Glyphs) onto html5 canvas?
如何设置绘制的字符样式？
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画布上绘制字体Awsome字形的方法：
-
Font Awesome中的链接：
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 在canvas元素（或其他元素）上。
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 onload功能]
与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.
这是一个解决方法onload函数，当FontAwesome已经完全加载并准备好在画布上 fillText 时，你可以用它来触发回调：
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('\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>
这篇关于如何在html画布上绘制字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
