![enter image description here](https://istack.dev59.com/jzRH9.webp)
这里是如何在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);
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);
}
}
});
</script>
</head>
<body>
<h4>Font Awesome glyphs drawn onto html5 canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
font-family: fontAwesome
,这样浏览器才会加载字体。 - Kaiidofont-family
并不是必需的。使用canvas时,您可以使用context.font加载一个或多个(!)自定义字体以供context.fillText使用--包括FontAwesome和其他自定义字体。演示在不将画布元素提交给任何特定字体系列的情况下正常工作,但它确实需要笨拙的setTimeout
来给自定义字体加载时间。是的,如果您只需要一个自定义字体,那么您可以将font-family='fontawesome'
添加到画布中。感谢您提到的替代方案--我会将您的评论添加到我的答案中! :-) - markE