Summary of text alignment using HTML5 Canvas,
Horizontal Alignment textAlign
Copy the content to the clipboard using JavaScript Code
- Context. textAlign = "center | end | left | right | start ";
The values and meanings are shown in the following table.
| Value |
Description |
| Start |
Default value. The text starts at the specified position. |
| End |
The text ends at the specified position. |
| Center |
The center of the text is placed in the specified position. |
| Left |
Left-aligned text, |
| Right |
Right-aligned text. |
Let's use an example to intuitively feel it.
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html lang = "zh">
- <Head>
- <Meta charset = "UTF-8">
- <Title> textAlign </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 );
- // Create a blue line at location 400
- Context. strokeStyle = "blue ";
- Context. moveTo (400,100 );
- Context. lineTo (400,500 );
- Context. stroke ();
- Context. fillStyle = "#000 ";
- Context. font = "50px Arial ";
- // Display different textAlign values
- Context. textAlign = "start ";
- Context. fillText ("textAlign = start", 400,120 );
- Context. textAlign = "end ";
- Context. fillText ("textAlign = end", 400,200 );
- Context. textAlign = "left ";
- Context. fillText ("Fig = left", 400,280 );
- Context. textAlign = "center ";
- Context. fillText ("textAlign = center", 400,360 );
- Context. textAlign = "right ";
- Context. fillText ("textAlign = right", 400,480 );
- };
- </Script>
- </Body>
- </Html>
Running result:
Vertical Alignment textBaseline
Copy the content to the clipboard using JavaScript Code
- Context. textBaseline = "alphabetic | top | hanging | middle | ideographic | bottom ";
The values and meanings are shown in the following table.
| Value |
Description |
| Alphabetic |
Default value. A text baseline is a normal letter baseline. |
| Top |
The text baseline is at the top of the em box. |
| Hanging |
A text baseline is a suspension baseline. |
| Middle |
The text baseline is the center of the em box. |
| Ideographic |
A text baseline is an ideographic baseline. |
| Bottom |
The text baseline is the bottom of the em box. |
First, let's look at the positions represented by each Baseline through a graph.
Let's use an example to intuitively feel it.
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html lang = "zh">
- <Head>
- <Meta charset = "UTF-8">
- <Title> textBaseline </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 );
- // Draw the Blue Line at position y = 300
- Context. strokeStyle = "blue ";
- Context. moveTo (0,300 );
- Context. lineTo (800,300 );
- Context. stroke ();
- Context. fillStyle = "#00 AAAA ";
- Context. font = "20px Arial ";
- // Place each word with different textBaseline values in y = 300
- Context. textBaseline = "top ";
- Context. fillText ("Top", 150,300 );
- Context. textBaseline = "bottom ";
- Context. fillText ("Bottom", 250,300 );
- Context. textBaseline = "middle ";
- Context. fillText ("Middle", 350,300 );
- Context. textBaseline = "alphabetic ";
- Context. fillText ("Alphabetic", 450,300 );
- Context. textBaseline = "hanging ";
- Context. fillText ("Hanging", 550,300 );
- };
- </Script>
- </Body>
- </Html>
Running result:
