请问利用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等)引用改字体!!!这就是最大的坑了!!!