国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas繪制網絡字體幾種方法

Alfred / 1744人閱讀

最近在用canvas繪圖時遇到了一個令人頭痛的問題:canvas繪制網絡字體時沒效果,遂開始了一番解決方案查找測試,中間也碰到了不少坑,于是寫下此篇文章做個總結,如果大家在用canvas時遇到了同樣的問題,希望對大家有一定的幫助,接下來就來看看有哪幾種解決辦法

服務端轉換

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

webfontloader

webfontloader是一個由Google和Typekit共同開發(fā)的組件庫,提供了一組標準事件監(jiān)聽字體的加載,雖然已經很長時間沒有更新了,但是對字體加載的監(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.
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的字體,然后調用webfontloader的load方法進行配置監(jiān)聽,當字體加載完成后就會觸發(fā)active鉤子,開始繪制對應字體的內容,webfontloader提供了一個完整的事件系統(tǒng)鉤子給開發(fā)者調用:


如果想要了解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.
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ā)的時候,并不能保證字體已經加載完成,只能保證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.
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看字體是否加載完成,這樣就可以準確監(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.
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()

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

總結

這篇文章介紹了幾種canvas繪制網絡字體時的常用方法,每個方法都各有優(yōu)劣,希望對大家有所幫助,使用時根據具體情況選用。
如果有錯誤或不嚴謹?shù)牡胤剑瑲g迎批評指正,如果喜歡,歡迎點贊

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106945.html

相關文章

  • H5 canvas生成圖片并上傳文件轉成PDF下載canvas文字排版

    摘要:將預覽的圖片上傳,后端生成,在管理系統(tǒng)中下載。技術要點文字排版設置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉成上傳這里根據后端協(xié)商,此處后端要求將圖片生成,并點擊批量下載實現(xiàn)步驟文字排版在一般容器中,如果要實現(xiàn)文字的排版很容易。 最近遇到一個業(yè)務需求,在小程序端定制預覽功能,并在預覽的圖片中使用指定的外部字體。將預覽的圖片上傳OSS,后端生成PDF,在管理系統(tǒng)中下載。但是………...

    canopus4u 評論0 收藏0
  • HTML5 中 canvas 的使用總結

    摘要:上面代碼中,方法指定參數(shù),表示該節(jié)點用于生成圖案即平面圖案。小球不斷反彈后,逐步趨于靜止。假定是像素數(shù)組中一個象素的紅色值,則為綠色值,為藍色值,就是通道值。 1. 概述 Canvas API(畫布)用于在網頁實時生成圖像,并且可以操作圖像內容,基本上它是一個可以用JavaScript操作的位圖(bitmap)。 使用前,首先需要新建一個網頁元素。 您的瀏覽器不支持canvas!...

    Batkid 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<