如何在HTML画布上绘制“字体真棒"图标[版本< 5] [英] How to draw Font Awesome Icons onto html canvas [Version <5]
问题描述
如何在HTML5画布上绘制超赞字体"字符(图标字形)?我正在使用旧版的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画布上绘制Awsome字体的字形的方法:
-
超赞字体中的链接:
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注释，可以通过在canvas元素(或其他元素)上设置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一样，字体是异步加载的，因此在尝试在画布上绘制字体之前，必须等待它们完全加载.但是与img不同，字体没有内置的.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画布上绘制“字体真棒"图标[版本< 5]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
