如何在html画布上绘制字体真棒图标
Kan*_*iya 12 javascript html5-canvas font-awesome
如何在html5画布上绘制Font Awesome字符(Icons Glyphs)？
如何设置绘制的角色？
<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>
mar*_*rkE 30
这是如何在html5画布上绘制字体Awsome字形:
Font Awesome中的链接:
Run Code Online (Sandbox Code Playgroud)<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">将上下文字体设置为Font Awesome:
Run Code Online (Sandbox Code Playgroud)// set the canvas context's font-size and font-face context.font='14px FontAwesome';在画布上绘制一个Font Awesome字符:
Run Code Online (Sandbox Code Playgroud)// 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:fontawesomecanvas元素(或其他元素)来使浏览器开始加载FontAwesome .
该演示展示了如何"即时"加载自定义字体(包括FontAwesome).
[附加:FontAwesome onload功能]
与img一样,字体异步加载,因此在尝试在画布上绘制之前必须等待它们完全加载.但与imgs不同,字体没有内置.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);
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Font Awesome glyphs drawn onto html5 canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
- 母猪也适合我。我需要做 ctx.fillText(String.fromCharCode("0xf03d"), 20, 75) 才能工作 (3认同)
- 为了使其正常工作，我必须使用 ctx.font="bold 20px 'Font Awesome 5 Free'"。我从 webjar 中获得了 fa 5.8.1，它包含一个非粗体字体文件，其中的图标子集非常有限。 (2认同)
如何在 html canvas 中使用字体图标（Font Awesome）
您可以检查 fontawsome .css 文件并获取每个图标使用的代码。
例如：如果您看到用于获取图标 fa-info-circle 的代码文件，其如下所示
.fa-info-circle:before {
content: "\f05a";
}
所以尝试context.font = '\uf05a';// 这会给你fa-info-circle. \u 并记住在代码前添加。您还需要提及字体系列FontAWsome
| 归档时间： |
|
| 查看次数： |
13675 次 |
| 最近记录： |