Canvas text operations

Canvas text operations
The Canvas drawing environment provides three methods:
Draw filled text: fillText ();
Draw stroke text: strokeText ();
Draw text and return an object: measure ();
The object returned by the measure () method contains a width attribute that represents the width occupied by the drawn text;

var canvas = document.getElementById("canvas1");var context = canvas.getContext("2d");// fill fontcontext.font = "60px Palatino";context.fillStyle = "red";context.fillText("Cancas", 30, 60);// stroke fontcontext.strokeStyle = "yellow";context.strokeText("Cancas", 30, 60);// back measure object context.fillStyle = "blue";var measure = context.measureText("Cancas", 30, 120);// print text widthconsole.log(measure.width);

The Canvas drawing environment provides three attributes, for example:
Set the font of the text drawn later in the drawing environment: font;
Horizontal text orientation: textAlign;

Vertical text orientation: textBaseline;

 

 

Var canvas = document. getElementById ("canvas2"); var context = canvas. getContext ("2d"); function drawBackground () {var STEP_Y = 12, TOP_MARGIN = STEP_Y * 4, LEFT_MARGIN = STEP_Y * 3, I = context. canvas. height; context. strokeStyle = "lightgray"; context. lineWidth = 1; while (I> STEP_Y) {context. beginPath (); context. moveTo (0, I + 0.5); context. lineTo (context. canvas. width, I + 0.5); context. stroke (); I-= STEP_Y;} context. strokeStyle = "rgba (100, 0, 0, 0.3)"; context. lineWidth = 1; context. beginPath (); context. moveTo (LEFT_MARGIN, 0); context. lineTo (LEFT_MARGIN, context. canvas. height); context. stroke () ;}// draw backgrounddrawBackground (); // fill in the gradient effect var gradient = context for the text. createLinearGradient (0, 0, canvas. width, canvas. height); gradient. addColorStop (0, "red"); gradient. addColorStop (1, "blue"); context. font = "60px Arial"; context. textAlign = "left"; context. textBaseline = "middle"; context. fillStyle = gradient; context. fillText ("CANVAS", 60, 60); context. strokeStyle = "red"; context. beginPath (); context. moveTo (0.5, 60); context. lineTo (canvas. width + 0.5, 60); context. stroke ();

Note: You must set the glyphs before calling the measureText method.
When using the measureText method, a common mistake is to set the font after the method is called. Note that the measuerText method calculates the string width based on the current font. Therefore, if you change the font after calling the measureText method, the width returned by this method does not reflect the actual text width measured in that font.

Draw text around an arc

 

 

Var canvas = document. getElementById ("canvas3"); var context = canvas. getContext ("2d"); // arc attributes, arc coordinates and Arc Radius // var circle = {x: canvas. width/2, y: canvas. height/2, radius: 200} function drawCircularText (string, startAngle, endAngle) {var radius = circle. radius, // Arc radius angleDecrement = (startAngle-endAngle)/(string. length-1), // calculate the radian angle occupied by the first character = parseFloat (startAngle), // convert the radian to float index = 0, // index character for the characters to be drawn in the canvas; // assign the currently drawn character to it // Save the current drawing environment (canvas attributes, editing area, and translate) context. save (); context. fillStyle = "red"; context. strokeStyle = "blue"; context. font = "20px Lucida Sans"; while (index <string. length) {// obtain the character = string to be drawn. charAt (index); // Save the context of the current environment increment state. save (); // clear the sub-path context of the current path. beginPath (); // displacement context. translate (circle. x + Math. cos (angle) * radius, circle. y-Math. sin (angle) * radius); // rotate the radian context. rotate (Math. PI/2-angle); // fill in the text context. fillText (character, 0, 0); // stroke text context. strokeText (character, 0, 0); // recalculate the radian angle-= angleDecrement of the next character; // obtain the index ++ of the next character; // restore the last save () status context. restore ();} context. restore ();} drawCircularText ("canvas's hello word", Math. PI * 2, Math. PI/8 );