全国服务热线:4008-888-888

技术知识

html5 canvas绘图互联网字体样式的常见方式

近期在用canvas制图时遇到了1个让人头痛的难题:canvas绘图互联网字体样式时没实际效果,遂刚开始了1番处理计划方案搜索检测,正中间也碰到了很多坑,因而写下此篇文章内容做个总结,假如大伙儿在用canvas时遇到了一样的难题,期待对大伙儿有1定的协助,接下来就看来看有哪几种处理方法

服务端变换
 

服务端变换是甚么意思呢?立即把內容和必须的字体样式传送给服务端,服务端出示1个文本转照片的插口,将字体样式变换成照片,随后在canvas中立即绘图照片,这样就可以确保绘图互联网字体样式不容易有难题,不容易有任何的适配性难题,可是这样做也就代表着服务端工作中会变多,另外假如文本內容是能够被客户编写改动的,那就代表着客户每实际操作1次,都要恳求1次插口,随后再次绘图1次照片,这样会致使互联网花销提升,假如不要想服务端干预,那就看看下面的处理计划方案

webfontloader
 

webfontloader是1个由Google和Typekit相互开发设计的组件库,出示了1组规范恶性事件监视字体样式的载入,尽管早已很长期沒有升级了,可是对字体样式载入的监视的确合理,下面看来1个实际的事例如何应用:

var WebFont = require('webfontloader')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'
document.getElementsByTagName('head')[0].appendChild(link)
WebFont.load({
  custom: {
    families: ['Vast Shadow']
  },
  active: function () {
    ctx.font = '50px "Vast Shadow"'
    ctx.textBaseline = 'top'
    ctx.fillText('123', 20, 10)
  }
})

最先根据require引进webfontloader,而且动态性插进1个script标识加载google的字体样式,随后启用webfontloader的load方式开展配备监视,当字体样式载入进行后就会开启active钩子,刚开始绘图对应字体样式的內容,webfontloader出示了1个详细的恶性事件系统软件钩子给开发设计者启用:

 

假如要想掌握webfontloader的更多用法能够前往 github 查询学习培训,假如你感觉以便绘图互联网字体样式必须引进1个js库有点因小失大,没事儿,接下来向你接纳无需库的方式

document.fonts.load
 

假如你在Google上检索canvas载入互联网字体样式,你1定能搜到下面这个计划方案:

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'
document.getElementsByTagName('head')[0].appendChild(link)
var image = document.createElement('img')
image.src = link.href
image.onerror = () => {
  ctx.font = '50px "Vast Shadow"'
  ctx.textBaseline = 'top'
  ctx.fillText('123', 20, 10)
}

这个计划方案存在1点难题,当image onerror恶性事件开启的情况下,其实不能确保字体样式早已载入进行,只能确保css文档早已载入进行,因而,在第1次浏览的情况下其实不会起效:

 

可是你再更新1下访问器以后字体样式就起效了:

 

这是甚么缘故呢?大家看来1下更新访问器的互联网恳求:

 
 

能够看到后边的字体样式走的是缓存文件,因而能够字体样式能够绘图出来,可是假如将chrome调节的Disable cache勾选上,将缓存文件禁用掉,那末不管如何更新,字体样式都不容易绘图出来。

 

有处理方法吗?回答是有的,应用Font Load API开展载入,看来实际编码:

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'
document.getElementsByTagName('head')[0].appendChild(link)
var image = document.createElement('img')
image.src = link.href
image.onerror = () => {
  document.fonts.load('50px Vast Shadow', '123').then(() => {
    ctx.font = '50px "Vast Shadow"'
    ctx.textBaseline = 'top'
    ctx.fillText('123', 20, 10)
  })
}

 

先用image的onerror恶性事件trick css文档的载入,随后启用document.fonts.load看字体样式是不是载入进行,这样便可以精确监视到字体样式载入进行,可是这个api存在适配性难题,看来实际报表:

 

要想对这个api掌握更多,能够前往 mdn 查询

比照绘图

比照绘图是甚么意思呢?便是先设定1个沒有的字体样式,随后在设定大家必须的字体样式开展比照,看来实际编码:

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow'
document.getElementsByTagName('head')[0].appendChild(link)
ctx.font = '50px UNKNOW'
ctx.textBaseline = 'top'
ctx.fillText('123', 20, 10)
var dataDefault = ctx.getImageData(20, 10, 50, 50).data
ctx.clearRect(20, 10, 100, 100)
var detect = () => {
  ctx.font = '50px "Vast Shadow"'
  ctx.textBaseline = 'top'
  ctx.fillText('123', 20, 10)
  var dataNow = ctx.getImageData(20, 10, 50, 50).data
  if ([].slice.call(dataNow).join('') === [].slice.call(dataDefault).join('')) {
    ctx.clearRect(20, 10, 100, 100)
    requestAnimationFrame(detect)
  }
}
detect()

最先设定1个沒有的字体样式,绘图上去,随后拿到对应地区的3D渲染数据信息,随后再将3D渲染地区消除随后,随后再设定大家必须的字体样式,拿到对应地区的3D渲染数据信息,随后即时比照,当3D渲染数据信息1样时,表明绘图的全是系统软件默认设置字体样式,大家必须的字体样式沒有3D渲染出来,随后实行requestAnimationFrame再实行detect检验方式,直至3D渲染数据信息不1样,就表明大家必须的字体样式早已3D渲染进行

总结

以上所述是网编给大伙儿详细介绍的html5 canvas绘图互联网字体样式的常见方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服