最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間:8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
怎么在html5中使用canvas繪制網(wǎng)絡字體-創(chuàng)新互聯(lián)

怎么在html5中使用canvas繪制網(wǎng)絡字體?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。

涉縣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景,ssl證書未來市場廣闊!成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:13518219792(備注:SSL證書合作)期待與您的合作!

服務端轉(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)用:

怎么在html5中使用canvas繪制網(wǎng)絡字體

如果想要了解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)加載完成,因此,在第一次訪問的時候并不會生效:

怎么在html5中使用canvas繪制網(wǎng)絡字體

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

怎么在html5中使用canvas繪制網(wǎng)絡字體

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

怎么在html5中使用canvas繪制網(wǎng)絡字體 

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

怎么在html5中使用canvas繪制網(wǎng)絡字體

有解決辦法嗎?答案是有的,使用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存在兼容性問題,來看具體表格:

怎么在html5中使用canvas繪制網(wǎng)絡字體

想要對這個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)容,你們掌握怎么在html5中使用canvas繪制網(wǎng)絡字體的方法了嗎?如果還想學到更多技能或想了解更多相關內(nèi)容,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!


分享名稱:怎么在html5中使用canvas繪制網(wǎng)絡字體-創(chuàng)新互聯(lián)
網(wǎng)頁路徑:http://fisionsoft.com.cn/article/cchhgs.html