問題描述

請問利用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等)引用改字體!!!這就是最大的坑了!!!