Html5 canvas text center alignment

Last Update:2013-11-22 Source: Internet

Author: User

Tags linecap

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

[Color = eight: 25px] html Department

[Color = eight: 25px] <canvas id = "myCanvas"> </canvas>

[Color = eight: 25px] css Department

[Color = eight: 25px] canvas {width: 1000px; height: 700px ;}

[Color = eight: 25px] js Department
Basic structure at the beginning:
[Color = eight: 25px] window. onload = function () {var canvas = document. getElementById ('mycanvas ');
Var context = canvas. getContext ('2d ');
// Draw number order
Context. beginPath (); // declaration of start painting
Context. moveTo (x, y); // the starting point of definition.
Context. lineTo (x, y); // defines a starting point
Context. lineWidth = 5; // defines the line width
Context. strokeStyle = 'blue'; // defines the line color.
Context. lineCap = 'round '; // define the line cap (exposed rounded corner, pointed corner, angle)
Context. stroke (); // color the line to stop painting.
}
// Here is a small example of Line Painting.
:

[Color = eight: 25px]
The Code is as follows:

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = UTF-8/>
<Title> canvas line drawing </title>
</Head>
<Body>
<Canvas id = "test" width = 1000 height = 700> </canvas>
</Body>
<Script type = "text/JAVAscript">
Var can = document. getElementById ('test ');
Var draw = can. getContext ('2d ');
Draw. beginPath ();
Draw. moveTo (50,100 );
Draw. lineTo (300,100 );
Draw. lineWidth = 50;
Draw. strokeStyle = '#0f0 ';
Draw. lineCap = 'round ';
Draw. stroke ();
</Script>
</Html> the subsequent Code only exchanges content after beginPath ().

Next, introduce the silent attributes.
Context. font = "special text style font huge text font" // This special text style is optional. If it is not dug or written, the default value is normal. italic can be used to imply italic.
Context. fillStyle = '# f00'; // text color
Context. strokeText ('use the text created by canvas-border ', x, y); // create text to control the starting position of the file
Context. fillText ('use the text created by canvas -- supplemented by fillText ', x, y); // create text to control the starting position of the file
Context. textAlign = 'center'; // Method for alignment of text degree
Context. textBaseline = 'middle'; // the target and baseline of the text line.

[Color = eight: 25px]

[Color = eight: 25px. First view results

[Color = eight: 25px]
Code:

Draw. font = "normal 30px arial"
Draw. fillStyle = '# 00f ';
Draw. fillText ('The text created by using canvas -- supplemented ', 50, 50 );
Draw. font = "italic 40px arial"
Draw. strokeStyle = '# f00 ';
Draw. strokeText ('use the text created by canvas -- do not fill in ', 50,120 );

Next, use degree alignment and baseline alignment to align two attributes.

[Color = eight: 25px] 1) add or subtract from the above 'text created using canvas -- no complementing ': Align degree
[Color = eight: 25px]
Draw. strokeStyle = '# f00 ';
Draw. textAlign = 'center'; // The end code of addition and subtraction.
Draw. strokeText ('use the text created by canvas -- do not fill in ', 50,120 );

The effect is as follows:
[Color = eight: 25px]
If it is changed to draw. textAlign = 'right', the effect is as follows:

The so-called left, right, and center indicate the location of the reference surface.
Right suggestion, to the left of the entire text as the positioning surface, and then the position of the surface is located in the 120px (horizontal back) position defined in the upper part
It is easy to cure, please note!

At first, we introduced another attribute, which was equal to the natural text.
Draw. measureText (text or variable name)

For example

The Code is as follows:

Var can = document. getElementById ('test ');
Var draw = can. getContext ('2d ');
Var text = 'use the text created by the canvas -- supplemented'
Draw. beginPath ();
Draw. font = "normal 30px arial"
Draw. fillStyle = '# 00f ';
Draw. fillText (text, 50, 50 );
Var a = draw. measureText (text );
Var width = a. width;
Draw. font = "normal 30px arial"
Draw. fillStyle = '# f00 ';
Draw. fillText ('text sensitivity is '+ width + 'px', 50,100); if I change the position of width = a. width

[Color = eight: 25px] will have other effects (it is caused by code analysis from top to bottom)

[Color = eight: 25px] The Code is as follows:

[Color = eight: 25px]
Var can = document. getElementById ('test'); var draw = can. getContext ('2d '); var text = 'use the text created by canvas -- supplemented'; var a = draw. measureText (text); var width =. width; draw. beginPath (); draw. font = "normal 30px arial" draw. fillStyle = '# 00f'; draw. fillText (text, 50, 50); draw. font = "normal 30px arial" draw. fillStyle = '# f00'; draw. fillText ('text sensitivity: '+ width + 'px', 50,100); effect

[Color = eight: 25px]

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