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

Editor to share with you how to use HTML5 Canvas API to control the display and rendering of fonts. I hope you will get something after reading this article. Let's discuss it together.

What is the Canvas text API?

Attribute description

Font sets or returns the current font properties of text content

TextAlign sets or returns the current way the text content is aligned

TextBaseline sets or returns the current text baseline used when drawing text

Method description

FillText () draws "filled" text on the canvas

StrokeText () draws text on the canvas (no padding)

MeasureText () returns the object containing the specified text width

Read the above form, believe that children's shoes and have a general understanding. Here, we first talk about the display and rendering of the text, using font,fillText () and strokeText ().

Basic text display

When using text on Canvas, you must first know that text on Canvas cannot use CSS style, and although the font property is similar to the property of CSS, it cannot be used interchangeably.

Show the text three-step strategy:

1. Use font to set the font.

two。 Use fillStyle to set the font color.

3. Use the fillText () method to display fonts.

The font attribute here can be unspecified, and if no font is specified, 10px sans serif will be used automatically by default.

The following code simply shows a piece of text

JavaScript Code copies content to the clipboard

Basic text display

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

Var context = canvas.getContext ("2d")

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

/ / 1. Use `font` to set the font.

Context.font = "50px serif"

/ / 2. Use `fillStyle` to set the font color.

Context.fillStyle = "# 00AAAA"

/ / 3. Use the `font () `method to display fonts.

Context.fillText ("CANVAS--Draw on the Web", 50300)

}

Running result:

Set text font font

Setting font styles in Canvas is very easy, and the font property is the same as CSS's font formatting, so you can simply apply a CSS-compatible string to the font property. You can set the font style, font variants, font weight, font size and line height, font appearance, and so on.

The basic format is as follows.

CSS Code copies content to the clipboard

Context.font =

"[font-style] [font-variant] [font-weight]

[font-size/line-height] [font-family] "

The above five parameters can be defaulted and separated by commas.

Tip: parameters are wrapped in parentheses [] to indicate that they can be defaulted.

Let's introduce the meaning of these parameter values one by one.

Font-style

The font-style property defines the style of the font.

Value description

Normal default value. The browser displays a standard font style.

The italic browser displays a font style in italics.

The oblique browser displays a font style in italics.

The latter two usually look the same. But the way to get the tilt effect is different. Italic uses italics in a font library, and usually a font library has italic and bold forms of the font. Oblique tilts the word directly. If a font library does not have italic characters, then you cannot use italic. If you want to get a slanted font, you can only use oblique.

Font-variant

The font-variant property sets the font for small uppercase letters to display text, which means that all lowercase letters are converted to uppercase, but all letters using small uppercase fonts have a smaller font size than the rest of the text.

Value description

Normal default value. The browser displays a standard font style.

Small-caps browsers display fonts of small uppercase letters.

Look at the picture below to see what this attribute means.

That's it. The top line uses the default value of normal, and the bottom line uses small-caps. The effect is that the original capital letters remain the same, while the lowercase letters become uppercase, but the size remains the same.

Font-weight

The font-weight property sets the thickness of the text.

Value description

Normal default value. The browser displays a standard font style.

Bold defines bold characters.

Bolder defines thicker characters.

Lighter defines finer characters.

Values between 100 and 900 define characters from thick to thin. 400 is equivalent to normal, while 700 is equivalent to bold.

Font-size

The font-size property sets the size of the font.

Value description

Xx-samll minimum font

X-small smaller font

Samll small font.

Default value for medium.

Large big font.

X-large larger fonts.

Xx-large larger fonts.

Any numeric unit px, representing the font size value

Line-height

The line-height property sets the distance between rows (row height). Negative values are not allowed

Font-family

Font-family specifies the font family of the element.

Use @ font-face custom fonts

HTML5 supports common fonts. If not, you can use @ font-face to extend fonts. However, it is not recommended.

@ font-face can load font files on the server side, allowing the client to display fonts that are not installed by the client. Currently, loading EOT and TTF files is supported.

Example: the code is too long, slightly XD

2016324112305009.jpg (850 × 500)

The font library I downloaded here only has 26 uppercase letters Amurz, so if you encounter lowercase capitalization, you will use star symbols instead of Chinese characters or numbers. It's cool to customize fonts by using @ font-face in CSS3.

Text rendering

Like drawing a rectangle, there are two ways to "draw" text-- fillText () and strokeText (). The reason for this is the same, because these two methods can also set the corresponding properties through fillStyle and strokeStyle, and the previously mentioned color fills, gradient fills, and even hatches are all possible.

The parameter table of fillText () and strokeText () is the same, accepting four parameters, namely String,x,y and maxlen, where String refers to the string to be displayed, then x and y refer to the displayed coordinates, and the last maxlen is a numeric parameter that can be defaulted, representing the maximum width of the display, in pixels. If the length of the text exceeds this maxlen,Canvas, the displayed text will be compressed horizontally. Usually in order to ensure the beauty of the font, we do not set maxlen.

That is, context.fillText (String,x,y, [maxlen]) and context.strokeText (String,x,y, [maxlen]).

Let's take a look at the effect of text rendering through an example.

JavaScript Code copies content to the clipboard

Text rendering

Body {background: url (". / images/bg3.jpg") repeat;}

# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}

I can't believe your browser doesn't support Canvasations! Hurry up and change it!

_ window.onload = function () {

Var canvas = document.getElementById ("canvas")

Canvas.width = 800,

Canvas.height = 600,

Var context = canvas.getContext ("2d")

Context.fillStyle = "# FFF"

Context.fillRect (0Pol 0800600)

Context.beginPath ()

Context.font = "50px Verdana"

Var gradient = context.createLinearGradient (0re0jue 800fu0)

Gradient.addColorStop ("0", "magenta")

Gradient.addColorStop ("0.5", "blue")

Gradient.addColorStop ("1. 0", "red")

Context.fillStyle = gradient

Context.strokeStyle = "# 00AAAA"

Context.strokeText ("airingursb.github.io", 50,100)

Context.fillText ("airingursb.github.io", 50200)

/ / limit the width

Context.fillText ("airingursb.github.io", 50300200)

Context.beginPath ()

Var img = new Image ()

Img.src = ". / images/bg1.jpg"

Img.onload = function () {

Var pattern = context.createPattern (img, "repeat")

Context.fillStyle = pattern

Context.fillText ("airingursb.github.io", 50,400)

}

Context.beginPath ()

Context.fillStyle = "# 00AAAA"

Context.fillText ("Airing's blog, Welcome", 50500)

}

After reading this article, I believe you have some understanding of "how to use HTML5 Canvas API to control font display and rendering". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.