84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
请问利用font-face定义的字体怎么在canvas里应用?
<style> @font-face { font-family: "_________"; //下划线填字体名称 src: url("_________"); //下划线填字体文件 } </style> <script type="text/javascript"> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.fillStyle = '#000'; ctx.font = "60px Automania"; ctx.textBaseline = 'top'; ctx.fillText('what this font looks', 0, 5); ctx.stroke(); } img.src = 'img.png'; } </script> <input onclick="draw()" type="button" value="test" /> <canvas id="canvas" width="800" height="800"></canvas>
不过不建议在canvas中使用自定义字体,因为字体文件加载太慢。。
1.必须再等到字体下载完成之后再去渲染canvas,字体才能有作用 2.canvas中所引用的字体必须在文档流中有标签(span,p等)引用改字体!!!这就是最大的坑了!!!
不过不建议在canvas中使用自定义字体,因为字体文件加载太慢。。
1.必须再等到字体下载完成之后再去渲染canvas,字体才能有作用
2.canvas中所引用的字体必须在文档流中有标签(span,p等)引用改字体!!!这就是最大的坑了!!!