canvas绘制html标签,canvas绘制文字
最近用画布画画遇到了一个头疼的问题：用画布画网络字体不行，于是开始了解决方案搜索测试，中间有很多漏洞，所以写了这篇文章做个总结。如果你在使用canvas的时候遇到同样的问题，希望对你有一定的帮助。接下来，我们来看看有哪些解决方案。
服务端转换
服务器端转换是什么意思？直接把内容和需要的字体交付给服务器，服务器提供一个文字到图片的接口，把字体转换成图片，然后直接在画布上画图，这样保证画网络字体不会有问题，也不会有兼容性问题。但是，这样做也意味着将在服务器上完成更多的工作。同时，如果文字内容可以被用户编辑修改，就意味着用户每次操作都要请求界面，然后重绘图片。这将
webfontloader
Webfontloader是Google和Typekit联合开发的组件库，提供了一套标准的事件监控字体。虽然很久没更新了，但是对字体加载的监控真的很有效。这里有一个如何使用它的具体例子：
var web font=require( web font loader )var canvas=document . getelementbyid( canvas )var CTX=canvas . get context( 2d )var link=document . createelement( link )link . rel= style sheet link . type= text/CSS link . href= http://fonts . Google APIs . com/CSS？family=Vast Shadow document . getelementsbytagname( head )[0]。append child(link)web font . load({ custom:{ families:[ Vast Shadow ]}，Active:function(){ CTX . font= 50px Vast Shadow CTX . text baseline= top CTX . fill text( 123 ，20，10)}})首先通过require引入webfontloader，动态插入一个脚本标签加载google的字体，然后调用webfontloader的load方法进行配置和监控。加载字体时，会触发活动钩子，开始绘制相应字体的内容。webfontloader提供了一个完整的事件系统钩子，供开发人员调用：
如果想了解更多webfontloader的使用方法，可以去github查看学习。如果你觉得为了画网络字体而引入一个js库成本会高一点，没关系。接下来我就接受不用库的方法。
document . font . load
如果你在Google上搜索canvas加载网络字体，你一定会发现以下方案：
var canvas=document . getelementbyid( canvas )var CTX=canvas . get context( 2d )var link=document . createelement( link )link . rel= style sheet link . type= text/CSS link . href= http://fonts . Google APIs . com/CSS？family=Vast Shadow document . getelementsbytagname( head )[0]。appendChild(link)var image=document . createelement( img )image . src=link . href image . on error=()={ CTX . font= 50px vast shadow CTX . text baseline= top CTX . fill text( 123 ，20，10)}这个方案有个小问题，触发image onerror事件时，不能保证字体已经加载，只能加载css文件。因此，它不会在第一次访问时生效：
但是在您再次刷新浏览器后，该字体将生效：
这是什么原因呢？让我们来看看刷新浏览器的web请求：
可以看到后面的字体是缓存的，所以可以画字体。但是如果勾选了chrome调试的禁用缓存，并且禁用了缓存，那么字体无论怎么刷新都不会被绘制。
有解决办法吗？答案是肯定的，用字体加载API加载，看具体代码：
var canvas=document . getelementbyid( canvas )var CTX=canvas . get context( 2d )var link=document . createelement( link )link . rel= style sheet link . type= text/CSS link . href= http://fonts . Google APIs . com/CSS？family=Vast Shadow document . getelementsbytagname( head )[0]。appendChild(link)var image=document . createelement( img )image . src=link . href image . on error=()={ document . fonts . load( 50px Vast Shadow ， 123 )。然后(()={ CTX . font= 50px Vast Shadow CTX . text baseline= top CTX . fill text( 123 ，20，10) })}
使用image的onerror事件先诱骗css文件加载，然后调用document.fonts.load查看字体是否加载，这样可以准确监控字体加载，但是这个api有兼容性问题。我们来看看具体的表格：
如果想了解更多关于这个api的内容，可以去mdn。
对比绘制
对比是什么意思？就是先设置一个不存在的字体，然后对比我们需要的字体来看具体代码：
var canvas=document . getelementbyid( canvas )var CTX=canvas . get context( 2d )var link=document . createelement( link )link . rel= style sheet link . type= text/CSS link . href= http://fonts . Google APIs . com/CSS？family=Vast Shadow document . getelementsbytagname( head )[0]。append child(link)CTX . font= 50px UNKNOW CTX . text baseline= top CTX . fill text( 123 ，20，10)var data default=CTX . getimagedata(20，10，50，50).datactx.clearRect(20，10，100，100)var detect=()={ CTX . font= 50px Vast Shadow CTX . text baseline= top CTX . fill text( 10数据if ([].slice.call(dataNow)。join()===[]. slice . call(data default)。join(){ CTX . clear rect(20，10，100，00)RequestAnimationFrame(detect)} } detect()先设置一个不可用的字体，画出来，然后获取对应区域的渲染数据，然后清空渲染区域，再设置我们需要的字体，获取对应区域的渲染数据，然后实时对比。当渲染数据相同时，表示绘制的是系统默认字体。不渲染我们需要的字体，然后执行requestAnimationFrame和detect方法，直到渲染的数据不一样，也就是说我们需要的字体已经渲染好了。
总结
以上是边肖介绍的html5 canvas绘制网络字体的常用方法。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。