Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the methods of drawing fonts on the canvas network". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the methods of drawing fonts on the canvas network?"

Server conversion

What does server-side conversion mean? Directly transfer the content and the required fonts to the server, which provides an interface for converting text to pictures, converting fonts into pictures, and then drawing pictures directly in canvas, which ensures that there will be no problems in drawing network fonts and compatibility problems, but this also means that the server will have more work, and if the text content can be edited and modified by the user. That means that every time users operate, they have to request an interface and then redraw the picture, which will increase the network overhead. If you do not want the intervention of the server, take a look at the following solution.

Webfontloader

Webfontloader is a component library jointly developed by Google and Typekit, which provides a set of standard event listening fonts to load. Although it has not been updated for a long time, the monitoring of font loading is really effective. Let's take a look at how to use a specific example:

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

First, webfontloader is introduced through require, and a script tag is dynamically inserted to load the font of google, and then the load method of webfontloader is called to configure listening. When the font is loaded, the active hook is triggered to start drawing the content of the corresponding font. Webfontloader provides a complete event system hook for developers to call:

If you want to know more about the use of webfontloader, you can go to github to check and learn. If you think it's too much to introduce a js library to draw web fonts, it doesn't matter, then accept the method of not using the library.

Document.fonts.load

If you search Google for canvas to load web fonts, you will find the following solution:

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.hrefimage.onerror = () = > {ctx.font =' 50px "Vast Shadow" 'ctx.textBaseline =' top' ctx.fillText ('123' 20, 10)}

There is a problem with this solution. When the image onerror event is triggered, there is no guarantee that the font has been loaded, only that the css file has been loaded, so it will not take effect on the first visit:

But after you refresh the browser, the font will take effect:

What is the reason for this? Let's take a look at the web request to refresh the browser:

You can see that the font behind is cached, so the font can be drawn, but if you check Disable cache for chrome debugging and disable the cache, then no matter how refreshed, the font will not be drawn.

Is there a solution? The answer is yes, use Font Load API to load, look at the specific code:

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.hrefimage.onerror = () = > {document.fonts.load (' 50px Vast Shadow') Then (() = > {ctx.font = '50px "Vast Shadow' ctx.textBaseline = 'top' ctx.fillText (' 123, 20,10)})}

First, use the onerror event trick css file of image to load, and then call document.fonts.load to see whether the font has been loaded, so that you can accurately monitor the completion of font loading. However, there is a compatibility problem with this api. Let's take a look at the specific table:

To learn more about this api, you can check it out at mdn.

Contrast drawing

What does it mean to draw a contrast? That is, first set a font that we don't have, and then compare the font we need to see the specific code:

Var canvas = document.getElementById ('canvas') var ctx = canvas.getContext (' 2d') var link = document.createElement ('link') link.rel =' stylesheet'link.type = 'text/css'link.href =' text/css'link.href = '50px UNKNOW'ctx.textBaseline =' top'ctx.fillText ('123, 20,10) var dataDefault = ctx.getImageData (20,10,50) 50) .datactx.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 ()

First of all, set a font that does not exist, draw it, then get the rendering data of the corresponding area, then clear the rendering area, then set the font we need, get the rendering data of the corresponding area, and then compare it in real time. When the rendering data is the same, it means that the font we need is the default font of the system, and the font we need is not rendered, and then execute requestAnimationFrame and then perform the detect detection method. Until the rendering data is different, it means that the font we need has been rendered.

At this point, I believe that everyone on the "canvas network font drawing methods have a deeper understanding, might as well to the actual operation of it!" Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.