html5 - 请问利用font-face定义的字体怎么在canvas里应用？

问题描述

请问利用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 height='800'></canvas>

不过不建议在canvas中使用自定义字体，因为字体文件加载太慢。。

1.必须再等到字体下载完成之后再去渲染canvas,字体才能有作用 2.canvas中所引用的字体必须在文档流中有标签(span,p等)引用改字体!!!这就是最大的坑了!!!