如何在HTML5画布上绘制“超赞字体”字符(图标字形)?我正在使用旧版的Font Awesome。
如何为绘制的字符设置样式?
<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画布上绘制Font Awsome字形的方法:
字体真棒链接:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
将上下文字体设置为Font Awesome:
// set the canvas context's font-size and font-face
context.font='14px FontAwesome';
在画布上绘制一个“真棒字体”字符:
// 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元素(或其他元素)上设置来使浏览器开始加载FontAwesome 。
该演示演示了如何“即时”加载自定义字体(包括FontAwesome)。
[添加:FontAwesome加载功能]
像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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句