canvas繪製網絡字體幾種方法

最近在用canvas繪圖時遇到了一個使人頭痛的問題：canvas繪製網絡字體時沒效果，遂開始了一番解決方案查找測試，中間也碰到了很多坑，因而寫下此篇文章作個總結，若是你們在用canvas時遇到了一樣的問題，但願對你們有必定的幫助，接下來就來看看有哪幾種解決辦法

服務端轉換

服務端轉換是什麼意思呢？直接把內容和須要的字體傳遞給服務端，服務端提供一個文字轉圖片的接口，將字體轉換成圖片，而後在canvas中直接繪製圖片，這樣就能保證繪製網絡字體不會有問題，不會有任何的兼容性問題，可是這樣作也就意味着服務端的工做會變多，同時若是文字內容是能夠被用戶編輯修改的，那就意味着用戶每操做一次，都要請求一次接口，而後從新繪製一次圖片，這樣會致使網絡開銷增長，若是不想要服務端的介入，那就看看下面的解決方案

webfontloader

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

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，而且動態插入一個script標籤載入google的字體，而後調用webfontloader的load方法進行配置監聽，當字體加載完成後就會觸發active鉤子，開始繪製對應字體的內容，webfontloader提供了一個完整的事件系統鉤子給開發者調用：

若是想要了解webfontloader的更多用法能夠前往github查看學習，若是你以爲爲了繪製網絡字體須要引入一個js庫有點得不償失，不要緊，接下來向你接受不用庫的方法

document.fonts.load

若是你在Google上搜索canvas加載網絡字體，你必定能搜到下面這個方案：

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事件觸發的時候，並不能保證字體已經加載完成，只能保證css文件已經加載完成，所以，在第一次訪問的時候並不會生效：

可是你再刷新一下瀏覽器以後字體就生效了：

這是什麼緣由呢？咱們來看一下刷新瀏覽器的網絡請求：

能夠看到後面的字體走的是緩存，所以能夠字體能夠繪製出來，可是若是將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查看

對比繪製

對比繪製是什麼意思呢？就是先設置一個沒有的字體，而後在設置咱們須要的字體進行對比，來看具體代碼：

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

首先設置一個沒有的字體，繪製上去，而後拿到對應區域的渲染數據，而後再將渲染區域清除而後，而後再設置咱們須要的字體，拿到對應區域的渲染數據，而後實時對比，當渲染數據同樣時，表示繪製的都是系統默認字體，咱們須要的字體沒有渲染出來，而後執行requestAnimationFrame再執行detect檢測方法，直到渲染數據不同，就表示咱們須要的字體已經渲染完成

總結

這篇文章介紹了幾種canvas繪製網絡字體時的經常使用方法，每一個方法都各有優劣，但願對你們有所幫助，使用時根據具體狀況選用。若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊