Text rendering of HTML5 canvas Basic drawing,
There are three attributes and three methods related to text rendering:
The basic usage of the above attributes and methods is as follows:
Copy the content to the clipboard using JavaScript Code
- Var canvas = document. getElementById ("canvas ");
- Var context = canvas. getContext ("2d ");
- Context. font = "bold 30px Arial"; // set the style
- Context. strokeStyle = "#1712F4 ";
- Context. strokeText ("Welcome to my blog! ", 30,100 );
- Context. font = "bold 50px Arial ";
- Var grd = context. createLinearGradient (30,200,400,300); // you can specify a gradient filling style.
- Grd. addColorStop (0, "#1EF9F7 ");
- Grd. addColorStop (0.25, "# FC0F31 ");
- Grd. addColorStop (0.5, "# ECF811 ");
- Grd. addColorStop (0.75, "#2F0AF1 ");
- Grd. addColorStop (1, "#160303 ");
- Context. fillStyle = grd;
- Context. fillText ("Welcome to my blog! ", 30,200 );
- Context. save ();
- Context. moveTo (200,280 );
- Context. lineTo (200,420 );
- Context. stroke ();
- Context. font = "bold 20px Arial ";
- Context. fillStyle = "# F80707 ";
- Context. textAlign = "left ";
- Context. fillText ("the text starts at the specified position", 200,300 );
- Context. textAlign = "center ";
- Context. fillText ("the center of the text is placed in the specified position", 200,350 );
- Context. textAlign = "right ";
- Context. fillText ("text ends at the specified position", 200,400 );
- Context. restore ();
- Context. save ();
- Context. moveTo (10,500 );
- Context. lineTo (500,500 );
- Context. stroke ();
- Context. fillStyle = "# F60D0D ";
- Context. font = "bold 20px Arial ";
- Context. textBaseline = "top ";
- Context. fillText ("specify the position above", 10,500 );
- Context. textBaseline = "bottom ";
- Context. fillText ("the specified location is below", 150,500 );
- Context. textBaseline = "middle ";
- Context. fillText ("center at specified position", 300,500 );
- Context. restore ();
- Context. font = "bold 40px Arial ";
- Context. strokeStyle = "#16F643 ";
- Var text = "Welcome to my blog! ";
- Context. strokeText ("Welcome to my blog! ", 10,600 );
- Context. strokeText ("the width of the above string is:" + context. measureText (text). width, 10,650 );
The effect is as follows:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
