HTML5 Canvas API is used to control the display and rendering of fonts. html5canvas

Last Update:2016-03-28 Source: Internet

Author: User

Tags italic font italic font style

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML5 Canvas API is used to control the display and rendering of fonts. html5canvas

API Overview
Today, we are fighting for a new text API called HTML5 Canvas! You know, an artist is also a calligrapher, so we need to learn and write beautiful words. Is it interesting?

Okay. First, let's look at the Canvas text API.

Attribute	Description
Font	Sets or returns the current font attribute of text content.
TextAlign	Sets or returns the current method of text content.
TextBaseline	Sets or returns the current text baseline used for text painting.

Method	Description
FillText ()	Draw "filled" text on the canvas
StrokeText ()	Draw text on the canvas (without filling)
MeasureText ()	Returns the object containing the specified text width.

After reading the above table, I believe that the children's shoes have a rough understanding. Here, we first talk about text display and rendering, and use font, fillText () and strokeText ().

Basic text display
To use text on a Canvas, you must first know that the text on the Canvas cannot use CSS styles. Although the font attribute is similar to the CSS attribute, it cannot be exchanged.

Show text three-step strategy:

1. Use font to set the font.
2. Use fillStyle to set the font color.
3. Use fillText () to display the font.
The font attribute can be left unspecified. If no font is specified, the default value is 10px.

The following code shows a piece of text.

Copy the content to the clipboard using JavaScript Code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> display basic text </title>
<Style>
Body {background: url ("./images/bg3.jpg") repeat ;}
# Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
</Style>
</Head>
<Body>
<Div id = "canvas-warp">
<Canvas id = "canvas">
Does your browser support Canvas ?! Just change one !!
</Canvas>
</Div>
<Script>
Window. onload = function (){
Var canvas = document. getElementById ("canvas ");
Canvas. width = 800;
Canvas. height = 600;
Var context = canvas. getContext ("2d ");
Context. fillStyle = "# FFF ";
Context. fillRect (0, 0, 800,600 );
// 1. Use 'font' to set the font.
Context. font = "50px serif ";
// 2. Use 'fillstyle' to set the font color.
Context. fillStyle = "#00 AAAA ";
// 3. Use the 'filltext () 'method to display the font.
Context. fillText ("CANVAS -- Draw on the Web", 50,300 );
};
</Script>
</Body>
</Html>

Running result:

Set text font
It is very easy to set the font style in the Canvas. The font attribute is the same as the CSS font format. Therefore, you only need to apply the CSS-compatible string to the font attribute. You can set the font style, font variant, font width, font size and line height, and font appearance.

The basic format is as follows.

Copy the content to the clipboard using CSS Code.

Context. font =
"[Font-style] [font-variant] [font-weight]
[Font-size/line-height] [font-family]"

The preceding five parameters can be used by default. Each parameter is separated by a comma.

Tip: parameters are enclosed in brackets [] to indicate that they can be defaulted.
The following describes the meanings of these parameter values.

Font-style
The font-style attribute defines the font style.

Value	Description
Normal	Default value. The browser displays a standard font style.
Italic	The browser displays an italic font style.
Oblique	The browser displays an italic font style.

The latter two usually seem to have no difference. However, the method for obtaining the skew effect is different. Italic is the italic in the font library. Generally, a font library is an italic and a bold font. Oblique directly tilts words. If a font library does not have italic, italic cannot be used. You can only use oblique to obtain the skewed font.

Font-variant
The font-variant attribute sets the font of small uppercase letters to display text, which means that all lowercase letters are converted to uppercase letters, but all letters using small uppercase letters are compared with other texts, the font size is smaller.

Value	Description
Normal	Default value. The browser displays a standard font style.
Small-caps	The browser displays the font of small uppercase letters.

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

In this case, the above row uses the default value normal, and the following row uses small-caps. The effect is that the original uppercase letters remain unchanged, while the lowercase letters are changed to uppercase letters, but the size remains unchanged.

Font-weight
The font-weight attribute sets the text width.

Value	Description
Normal	Default value. The browser displays a standard font style.
Bold	Defines bold characters.
Bolder	Specifies the characters that are thicker.
Lighter	Defines finer characters.
Values between and	Defines characters from coarse to fine. 400 is equivalent to normal, and 700 is equivalent to bold.

Font-size
The font-size attribute allows you to set the font size.

Value	Description
Xx-samll	Minimum font
X-small	Small font
Samll	Small font.
Medium	Default value.
Large	Large font.
X-large	Large font.
Xx-large	Large font.
Any value	Unit: px, indicating the font size.

Line-height
The line-height attribute sets the line distance (line height ). Negative values are not allowed.

Font-family
Font-family specifies the font family of elements.

Use @ font-face to customize the font
HTML5 supports common fonts. If not, you can use @ font-face to expand the font. But it is not recommended.

@ Font-face: loads the font files on the server to display fonts not installed on the client. Currently, EOT and TTF files can be loaded.

Example: The code is too long, slightly XD

The font library I downloaded here only has the 26 uppercase English letters of the A-Z, so it is automatically converted to uppercase in case of lowercase, it is designated to replace with the star symbol in case of Chinese characters or numbers. It's cool to use @ font-face in CSS3 to customize the font.

Text Rendering
Like drawing a rectangle, "Draw" text provides two methods: fillText () and strokeText (). The reason is the same, because these two methods can also use fillStyle and strokeStyle to set the corresponding attributes. previously mentioned color filling, gradient filling, and even pattern filling are all possible.

The parameter table of fillText () and strokeText () is the same. Four parameters are accepted: String, x, y, and maxlen. String indicates the String to be displayed, after that, x and y are the coordinates of the display. The last maxlen is a default numeric parameter, representing the maximum width of the display, in pixels. If the length of the text exceeds maxlen, Canvas compresses the displayed text horizontally. We do not set maxlen to ensure that the font is beautiful.

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

Next we will use a case study to see the text rendering effect.

Copy the content to the clipboard using JavaScript Code

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<Meta charset = "UTF-8">
<Title> text rendering </title>
<Style>
Body {background: url ("./images/bg3.jpg") repeat ;}
# Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
</Style>
</Head>
<Body>
<Div id = "canvas-warp">
<Canvas id = "canvas">
Does your browser support Canvas ?! Just change one !!
</Canvas>
</Div>
<Script>
Window. onload = function (){
Var canvas = document. getElementById ("canvas ");
Canvas. width = 800;
Canvas. height = 600;
Var context = canvas. getContext ("2d ");
Context. fillStyle = "# FFF ";
Context. fillRect (0, 0, 800,600 );
Context. beginPath ();
Context. font = "50px Verdana ";
Var gradient = context. createLinearGradient (0,0, 800,0 );
Gradient. addColorStop ("0", "magenta ");
Gradient. addColorStop ("0.5", "blue ");
Gradient. addColorStop ("1.0", "red ");
Context. fillStyle = gradient;
Context. strokeStyle = "#00 AAAA ";
Context. strokeText ("airingursb. github. io", 50,100 );
Context. fillText ("airingursb. github. I/O", 50,200 );
// Limit the width
Context. fillText ("airingursb. github. I/O", 50,300,200 );
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. I/O", 50,400 );
}
Context. beginPath ();
Context. fillStyle = "#00 AAAA ";
Context. fillText ("Airing blog, welcome to visit", 50,500 );
};
</Script>
</Body>
</Html>

Running result:

The first line uses the strokeText () method of the general color, the second line uses the gradient fillText () method, and the third line sets maxlen, the fourth line fills the font with a texture pattern, and the fifth line is an advertisement ......

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More