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. docker - 如何修改运行中容器的配置2. 网页爬虫 - Python:爬虫的中文编码问题?3. javascript - 关于Js中 this的一道题4. javascript - 修改表单多选项时和后台同事配合的问题。5. ubuntu 远程管理KVM设置问题6. javascript - H5页面怎么查看console信息?7. thinkjs - 使用mysql搭建cms应该如何设计表?或怎样开始?8. css - 手机页面在安卓和苹果浏览器显示不同的小小问题9. javascript - vue生成一维码?求助!!!!!急10. angular.js - angularjs如何动态改变ng-model值,在controller中获取input中输入的值并组合post发送到后台
