[Js master path] html5 canvas series tutorial, html5canvas

[Js master path] html5 canvas series tutorial, html5canvas

Next, the above line style [js master path] html5 canvas series tutorials-line style (lineWidth, lineCap, lineJoin, setLineDash) continue.

Canvas provides two ways to output text:

StrokeText: stroke text

FillText: Fill text

Use fillStyle with fillText and strokeStyle with strokeText

Usage of strokeText:

Cxt. strokeText (text, x, y, [maxwidth])

Text: The text content to be output.

X: the horizontal coordinate position of the leftmost text output.

Y: y coordinate in the lower left corner of the leftmost text

MaxWidth: This is an optional parameter, which means that the text can be as wide as maxWidth. If the actual width of the text is wider than maxWidth, there will be a compression (squashed) effect.

1 <meta charset = 'utf-8'/> 2 <style> 3 body {4 background: #000; 5} 6 # canvas {7 background: white; 8} 9 </style> 10 <script> 11 window. onload = function () {12 var oCanvas = document. querySelector ("# canvas"), 13 oGc = oCanvas. getContext ('2d '), 14 15 text = 'learn canvas with ghostwu'; 16 oGc. font = 'bold 30px '; 17 oGc. strokeStyle = '# 09f'; 18 oGc. strokeText (text, 100,100); 19 oGc. strokeText (text, 100,200,200 ); 20} 21 </script> 22 

FillText: Fill the text. The parameter is the same as that of strokeText.
Text = 'learn canvas with ghostwu '; oGc. font = 'bold 30px '; oGc. fillStyle = '# 09f'; oGc. fillText (text, 100,100); oGc. fillText (texts, 100,200,200 );

MeasureText: gets the width (length) of the text. It returns an object with a property width, which is the length of the text.
Cxt. measureText (text). width
Output a horizontal center text
1 <meta charset = 'utf-8'/> 2 <style> 3 body {4 background: #000; 5} 6 # canvas {7 background: white; 8} 9 </style> 10 <script> 11 window. onload = function () {12 var oCanvas = document. querySelector ("# canvas"), 13 oGc = oCanvas. getContext ('2d '), 14 width = oCanvas. width, 15 text = 'learn canvas with ghostwu '; 16 17 oGc. font = 'bold 30px '; 18 oGc. fillStyle = '# 09f'; 19 oGc. fillText (text, (width-oGc. measureText (text ). width)/2,100 ); 20} 21 </script> 22 

Font attributes are used in the same way as css.
Cxt. font = "font-style font-weight font-size/line-height font-family"
TextAlign: horizontal text alignment
Cxt. textAlign = 'start/end/left/right/Center ';
Start is similar to left, and end is similar to right.
1 <meta charset = 'utf-8'/> 2 <style> 3 body {4 background: #000; 5} 6 # canvas {7 background: white; 8} 9 </style> 10 <script> 11 window. onload = function () {12 var oCanvas = document. querySelector ("# canvas"), 13 oGc = oCanvas. getContext ('2d '), 14 width = oCanvas. width, 15 height = oCanvas. height, 16 text = 'learn canvas with ghostwu '; 17 18 oGc. font = 'bold 16px '; 19 oGc. fillStyle = '# 09f'; 20 21 var xPos = (width)/2; 22 oGc. moveTo (xPos, 0); 23 oGc. lineTo (xPos, height); 24 oGc. stroke (); 25 26 oGc. textAlign = 'start'; 27 oGc. fillText (text, 300, 30); 28 oGc. textAlign = 'left'; 29 oGc. fillText (text, 300, 60); 30 oGc. textAlign = 'right'; 31 oGc. fillText (text, 300, 90); 32 oGc. textAlign = 'end'; 33 oGc. fillText (text, 300,120); 34 oGc. textAlign = 'center'; 35 oGc. fillText (texts, 300,150 ); 36} 37 </script> 38 

TextBaseline: sets the vertical alignment of text.
Cxt. textBaseline = 'Property size'
Common attribute values: alphabetic, top, middle, and bottom
Similar to the usage of textAlign, this is not very common.