使用canvas怎么繪制網(wǎng)絡(luò)字體？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
服務(wù)端轉(zhuǎn)換
服務(wù)端轉(zhuǎn)換是什么意思呢？直接把內(nèi)容和需要的字體傳遞給服務(wù)端，服務(wù)端提供一個(gè)文字轉(zhuǎn)圖片的接口，將字體轉(zhuǎn)換成圖片，然后在canvas中直接繪制圖片，這樣就能保證繪制網(wǎng)絡(luò)字體不會(huì)有問題，不會(huì)有任何的兼容性問題，但是這樣做也就意味著服務(wù)端的工作會(huì)變多，同時(shí)如果文字內(nèi)容是可以被用戶編輯修改的，那就意味著用戶每操作一次，都要請(qǐng)求一次接口，然后重新繪制一次圖片，這樣會(huì)導(dǎo)致網(wǎng)絡(luò)開銷增加，如果不想要服務(wù)端的介入，那就看看下面的解決方案
webfontloader
webfontloader是一個(gè)由Google和Typekit共同開發(fā)的組件庫(kù)，提供了一組標(biāo)準(zhǔn)事件監(jiān)聽字體的加載，雖然已經(jīng)很長(zhǎng)時(shí)間沒有更新了，但是對(duì)字體加載的監(jiān)聽確實(shí)有效，下面來看一個(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)
}
})首先通過require引入webfontloader，并且動(dòng)態(tài)插入一個(gè)script標(biāo)簽載入google的字體，然后調(diào)用webfontloader的load方法進(jìn)行配置監(jiān)聽，當(dāng)字體加載完成后就會(huì)觸發(fā)active鉤子，開始繪制對(duì)應(yīng)字體的內(nèi)容，webfontloader提供了一個(gè)完整的事件系統(tǒng)鉤子給開發(fā)者調(diào)用：
如果想要了解webfontloader的更多用法可以前往github查看學(xué)習(xí)，如果你覺得為了繪制網(wǎng)絡(luò)字體需要引入一個(gè)js庫(kù)有點(diǎn)得不償失，沒關(guān)系，接下來向你接受不用庫(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)問題，當(dāng)image onerror事件觸發(fā)的時(shí)候，并不能保證字體已經(jīng)加載完成，只能保證css文件已經(jīng)加載完成，因此，在第一次訪問的時(shí)候并不會(huì)生效：
但是你再刷新一下瀏覽器之后字體就生效了：
這是什么原因呢？我們來看一下刷新瀏覽器的網(wǎng)絡(luò)請(qǐng)求：
可以看到后面的字體走的是緩存，因此可以字體可以繪制出來，但是如果將chrome調(diào)試的Disable cache勾選上，將緩存禁用掉，那么無論怎么刷新，字體都不會(huì)繪制出來。
有解決辦法嗎？答案是有的，使用Font Load API進(jìn)行加載，來看具體代碼：
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)聽到字體加載完成，但是這個(gè)api存在兼容性問題，來看具體表格：
想要對(duì)這個(gè)api了解更多，可以前往mdn查看
對(duì)比繪制
對(duì)比繪制是什么意思呢？就是先設(shè)置一個(gè)沒有的字體，然后在設(shè)置我們需要的字體進(jìn)行對(duì)比，來看具體代碼：
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()看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。
