canvas绘制html标签,canvas绘制文字

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: