Canvas draw text, canvas draw

Canvas draw text, canvas draw

<! DOCTYPE html> 
 
Function draw (id) {var canvas = document. getElementById (id); // obtain the canvas object var context = canvas. getContext ('2d '); // obtain the context and set it to 2d context. fillStyle = "green"; // specifies the rectangular color context of the canvas size. fillRect (800,300,); // draw the rectangular context of the canvas size. fillStyle = "white"; // set the text fill color context. strokeStyle = "white"; // set the text border color context. font = "bold 40px '文 ',' '"; // set the font width, size, and style. [multiple options ]. // Vertical text alignment. The default value is alphabetic // Bottom Alphabetic // --------------------- Middle -------------------------- // Top Hanging // context. textBaseline = 'alphabetic '; // The attribute values can be top (top alignment), hanging (suspension), middle (center alignment), bottom (bottom alignment), and alphabetic (default value. Context. textBaseline = 'hanging'; // sets the horizontal alignment of text, the default value is start/| // | start/end | // | left/center/right | // context. textAlign = 'start'; // The attribute value can be set to start, end, left, right, and center context. fillText ("Welcome to Hua Shuai's blog",); context. strokeText ("HTML5 + CSS3 practices", 200,130); context. fillText ("getting started, thank you. ", 380,190); context. fillText ('20140901', 123456789987654321123456789987654321123456789987654321123456789987654321123456789987654321 )}
 
The fillText method or StrokeText method that can be used to draw a font.
The fillText method is used to draw strings by filling them.
Context. fillText (text, x, y, [maxwidth]);

The strokeText method draws strings using outlines.
Context. strokeText (text, x, y, [width]);

The first parameter text indicates the text to be drawn, the second parameter x indicates the abscissa of the start point to be drawn, and the third parameter y indicates the ordinate of the start point of the text to be drawn, the fourth parameter, maxwidth, is an optional parameter, indicating the maximum width of text displayed to prevent text overflow.