App下載

canvas網(wǎng)絡(luò)字體繪制方法總結(jié)!

流蘇書(shū)包 2021-08-07 16:22:05 瀏覽數(shù) (2073)
反饋

小編最近在用canvas繪圖時(shí)遇到了一個(gè)令人頭痛的問(wèn)題:canvas繪制網(wǎng)絡(luò)字體時(shí)沒(méi)效果。于是今天就來(lái)和大家分享“canvas網(wǎng)絡(luò)字體繪制方法總結(jié)! ”這方面的相關(guān)內(nèi)容!

服務(wù)端轉(zhuǎn)換

服務(wù)端轉(zhuǎn)換是什么意思呢?直接把內(nèi)容和需要的字體傳遞給服務(wù)端,服務(wù)端提供一個(gè)文字轉(zhuǎn)圖片的接口,將字體轉(zhuǎn)換成圖片,然后在canvas中直接繪制圖片,這樣就能保證繪制網(wǎng)絡(luò)字體不會(huì)有問(wèn)題,不會(huì)有任何的兼容性問(wèn)題,但是這樣做也就意味著服務(wù)端的工作會(huì)變多,同時(shí)如果文字內(nèi)容是可以被用戶編輯修改的,那就意味著用戶每操作一次,都要請(qǐng)求一次接口,然后重新繪制一次圖片,這樣會(huì)導(dǎo)致網(wǎng)絡(luò)開(kāi)銷增加,如果不想要服務(wù)端的介入,那就看看下面的解決方案

webfontloader

webfontloader是一個(gè)由Google和Typekit共同開(kāi)發(fā)的組件庫(kù),提供了一組標(biāo)準(zhǔn)事件監(jiān)聽(tīng)字體的加載,雖然已經(jīng)很長(zhǎng)時(shí)間沒(méi)有更新了,但是對(duì)字體加載的監(jiān)聽(tīng)確實(shí)有效,下面來(lái)看一個(gè)具體的例子怎么使用:

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)
  }
})

首先通過(guò)require引入webfontloader,并且動(dòng)態(tài)插入一個(gè)script標(biāo)簽載入google的字體,然后調(diào)用webfontloader的load方法進(jìn)行配置監(jiān)聽(tīng),當(dāng)字體加載完成后就會(huì)觸發(fā)active鉤子,開(kāi)始繪制對(duì)應(yīng)字體的內(nèi)容,webfontloader提供了一個(gè)完整的事件系統(tǒng)鉤子給開(kāi)發(fā)者調(diào)用:

如果想要了解webfontloader的更多用法可以前往github查看學(xué)習(xí),如果你覺(jué)得為了繪制網(wǎng)絡(luò)字體需要引入一個(gè)js庫(kù)有點(diǎn)得不償失,沒(méi)關(guān)系,接下來(lái)向你接受不用庫(kù)的方法

document.fonts.load

如果你在Google上搜索canvas加載網(wǎng)絡(luò)字體,你一定能搜到下面這個(gè)方案:

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)
}

這個(gè)方案存在一點(diǎn)問(wèn)題,當(dāng)image onerror事件觸發(fā)的時(shí)候,并不能保證字體已經(jīng)加載完成,只能保證css文件已經(jīng)加載完成,因此,在第一次訪問(wèn)的時(shí)候并不會(huì)生效:

但是你再刷新一下瀏覽器之后字體就生效了:


這是什么原因呢?我們來(lái)看一下刷新瀏覽器的網(wǎng)絡(luò)請(qǐng)求:

可以看到后面的字體走的是緩存,因此可以字體可以繪制出來(lái),但是如果將chrome調(diào)試的Disable cache勾選上,將緩存禁用掉,那么無(wú)論怎么刷新,字體都不會(huì)繪制出來(lái)。

有解決辦法嗎?答案是有的,使用Font Load API進(jìn)行加載,來(lái)看具體代碼:

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文件的加載,然后調(diào)用document.fonts.load看字體是否加載完成,這樣就可以準(zhǔn)確監(jiān)聽(tīng)到字體加載完成,但是這個(gè)api存在兼容性問(wèn)題,來(lái)看具體表格:

想要對(duì)這個(gè)api了解更多,可以前往mdn查看

對(duì)比繪制

對(duì)比繪制是什么意思呢?就是先設(shè)置一個(gè)沒(méi)有的字體,然后在設(shè)置我們需要的字體進(jìn)行對(duì)比,來(lái)看具體代碼:

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()

首先設(shè)置一個(gè)沒(méi)有的字體,繪制上去,然后拿到對(duì)應(yīng)區(qū)域的渲染數(shù)據(jù),然后再將渲染區(qū)域清除然后,然后再設(shè)置我們需要的字體,拿到對(duì)應(yīng)區(qū)域的渲染數(shù)據(jù),然后實(shí)時(shí)對(duì)比,當(dāng)渲染數(shù)據(jù)一樣時(shí),表示繪制的都是系統(tǒng)默認(rèn)字體,我們需要的字體沒(méi)有渲染出來(lái),然后執(zhí)行requestAnimationFrame再執(zhí)行detect檢測(cè)方法,直到渲染數(shù)據(jù)不一樣,就表示我們需要的字體已經(jīng)渲染完成

總結(jié)

那么這就是這篇文章介紹的有關(guān)于“canvas網(wǎng)絡(luò)字體繪制方法總結(jié)! ”這方面的相關(guān)內(nèi)容了!有感興趣的小伙伴們可以W3Cschool進(jìn)行全面的學(xué)習(xí)。


0 人點(diǎn)贊