使用canvas怎么繪制網(wǎng)絡字體？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

為城子河等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及城子河網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都做網(wǎng)站、網(wǎng)站設計、外貿(mào)營銷網(wǎng)站建設、城子河網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

服務端轉(zhuǎn)換

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

webfontloader

webfontloader是一個由Google和Typekit共同開發(fā)的組件庫，提供了一組標準事件監(jiān)聽字體的加載，雖然已經(jīng)很長時間沒有更新了，但是對字體加載的監(jiān)聽確實有效，下面來看一個具體的例子怎么使用：

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，并且動態(tài)插入一個script標簽載入google的字體，然后調(diào)用webfontloader的load方法進行配置監(jiān)聽，當字體加載完成后就會觸發(fā)active鉤子，開始繪制對應字體的內(nèi)容，webfontloader提供了一個完整的事件系統(tǒng)鉤子給開發(fā)者調(diào)用：

如果想要了解webfontloader的更多用法可以前往github查看學習，如果你覺得為了繪制網(wǎng)絡字體需要引入一個js庫有點得不償失，沒關系，接下來向你接受不用庫的方法

document.fonts.load

如果你在Google上搜索canvas加載網(wǎng)絡字體，你一定能搜到下面這個方案：

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

這個方案存在一點問題，當image onerror事件觸發(fā)的時候，并不能保證字體已經(jīng)加載完成，只能保證css文件已經(jīng)加載完成，因此，在第一次訪問的時候并不會生效：

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

這是什么原因呢？我們來看一下刷新瀏覽器的網(wǎng)絡請求：

可以看到后面的字體走的是緩存，因此可以字體可以繪制出來，但是如果將chrome調(diào)試的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文件的加載，然后調(diào)用document.fonts.load看字體是否加載完成，這樣就可以準確監(jiān)聽到字體加載完成，但是這個api存在兼容性問題，來看具體表格：

想要對這個api了解更多，可以前往mdn查看

對比繪制

對比繪制是什么意思呢？就是先設置一個沒有的字體，然后在設置我們需要的字體進行對比，來看具體代碼：

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)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁題目：使用canvas怎么繪制網(wǎng)絡字體
本文地址：http://aaarwkj.com/article24/ispeje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、標簽優(yōu)化、小程序開發(fā)、App開發(fā)、定制網(wǎng)站、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)