first, draw the text
Two methods are provided in the drawing environment for drawing text in canvas.
Stroketext (text,x,y): Draws hollow text at (x,y).
Filltext (text,x,y): (x,y) draws a solid text.
second, draw text in canvas
The
code is as follows:
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html"; CharSet = utf-8 ">
<title>HTML5</title>
<script type= "text/javascript" charset = "Utf-8" >
//This function will be called after the page is fully loaded
function pageLoaded ()
{
//Get a reference to the canvas object, notice that the Tcanvas name must be the same as the ID in the following body
var canvas = document.getElementById (' Tcanvas ');
//Get the 2D drawing environment of the canvas
var context = Canvas.getcontext (' 2d ');
//Drawing code will appear here
//Draw text
Context.filltext (' Welcome to Dujun Blog ', 100,40);
//Modify Font
Context.font = ' 20px Arial ';
Context.filltext (' Welcome to Dujun Blog ', 100,100);
//Draw Hollow text
Context.font = ' 36px official script ';
Context.stroketext (' Welcome to Benedict's Blog ', 100,200);
}
</script>
</head>
<body onload= "pageLoaded ();" >
<canvas width = "height" = "$" id = "Tcanvas" style = "border:black 1px solid;" >
<!--Displays the following font if the browser does not support-->
Tip: Your browser does not support <canvas> tags
</canvas>
</body>
</html>
third, the drawing effect
