html5 - 请问利用font-face定义的字体怎么在canvas里应用?
问题描述
请问利用font-face定义的字体怎么在canvas里应用?
问题解答
回答1:<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中使用自定义字体,因为字体文件加载太慢。。
回答2:1.必须再等到字体下载完成之后再去渲染canvas,字体才能有作用 2.canvas中所引用的字体必须在文档流中有标签(span,p等)引用改字体!!!这就是最大的坑了!!!
相关文章:
1. angular.js - wepapp在网页上可以滑动但是适配在手机上不可以,为什么?求解2. angular.js - 请教一个关于angularjs的小问题3. angular.js - 创建项目问题的4. angular.js - 请教angularjs里html和js通信的问题5. angular.js - angularJs使用iframe,网页内容自适应的问题6. node.js - 怎么在初始化的时候使得一个子组件不加载?7. angular.js - angular2 最基础的问题8. python - Ubuntu16.04LTS登录后只显示屏保9. python - 如何在docker上部署pyspider10. Python中的内列表问题,真的很困惑