HTML5 Canvas The rendering of the text of the drawing __html

Text Rendering Basics

Context.font= "Bold 40px Arial"
The Font property can accept the font property of the CSS

Context.filltext (String,x,y,[maxlen])
String specifying the location, (x,y)
The Fillestyle property of the context sets the font properties
MaxLen Optional, representing the longest width of the text to be drawn

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.font= "Bold 20px Arial"
    context.fillstyle= "#058"
    context.filltext ("Hello canvas". ", 40,100)
}

Context.stroketext (String,x,y,[maxlen])
String specifying the location, (x,y)
The Strokestyle property of the context applies to fonts
MaxLen Optional, representing the longest width of the text to be drawn

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.font= "Bold 20px Arial"
    context.linewidth=1
    context.stroke= "#058"
    context.stroketext ("Hello Canvas ", 500,100)
}

Context.stroketext ("Hello canvas.") ", 500,100,100)
//Set MaxLen, you can forcibly compress text

Of course, you can add other effects: gradient, background padding, etc.
You can Filltext () and Stroketext () use text to render the Advanced font, font size, font

Default value "20px Sans-serif"

context.font=
Font-style font-variant Font-weight font-size font-family

Font-style: Normal (Defualt) italic (italic) oblique (italic font)
Typically, the difference between italic and oblique is not visible on the Web page, and oblique is simply tilted to the font. If you design a set of fonts when there is a special set of italic, it may not be the same as oblique
font-variant

Normal small-caps can only see differences when using lowercase letters in English

Look at the difference.

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.fillstyle= "#058"
    context.font= "bold 20px Arial"
    context.filltext ("Hello canvas.") ", 500,100)

    context.font=" Small-caps bold 20px Arial "
    context.filltext (" Hello canvas. ", 500,300)
}

Letters with Small-caps attributes are capitalized
Font-weight

Lighter
Normal
Bold
Bolder

The latest consortium standards, nine levels:
100,200,300,400 (normal), 500,600,700 (bold), 800,900

font-size
Set Font size
font-size:20px, 1em
font-family
Options for fonts
Set multiple font options
Support @font-face
Web Safe fonts
alignment of http://www.runoob.com/cssref/css-websafe-fonts.html text

Horizontal Alignment
Context.textalign=left, center, right

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.fillstyle= "#058"
    context.font= "bold 20px Arial"
    context.textalign= "left"
    context.filltext ( "Hello canvas." ", 500,200)

    context.textalign=" center "
    context.filltext (" Hello canvas. ", 500,300)

    context.textalign=" right "
    context.filltext (" Hello canvas. ", 500,400)
       //Auxiliary line
    context.strokestyle=" #888 "
    Context.moveto (500,0)
    Context.lineto (500,500)
    Context.stroke ()
}

Vertical Alignment
Context.textbaseline=top Middle Bottom Alphabetic (defualt) (based on Latin) ideographic (based on kanji) hanging (based on Hindi)

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.fillstyle= "#058"
    context.font= "bold 20px Arial"
    context.textalign= "left"
    context.filltext (" Hello Canvas. ", 500,200)

    context.textalign=" center "
    context.filltext (" Hello canvas. ", 500,300)

    context.textalign=" right "
    context.filltext (" Hello canvas. ", 500,400)

    context.strokestyle=" #888 "
    Context.moveto (500,0)
    Context.lineto (500,500)
    Context.stroke ()
}

This also can understand Filltext () (x,y)

Alphabetic (Defualt) (based on Latin) ideographic (kanji) hanging (based on Hindi) test

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.fillstyle= "#058"
    context.font= "bold 20px Arial"
    context.textbaseline= "alphabetic"
    Context.filltext ("Test Hello Canvas in Chinese and English.") ", 500,200)

    context.strokestyle=" #888 "
    Context.moveto (0,200)
    Context.lineto (800,200)
    Context.stroke ()

    context.textbaseline= "ideographic"
    context.filltext ("Test Hello Canvas in English". ", 500,300)
    context.strokestyle=" #888 "
    Context.moveto (0,300)
    Context.lineto (800,300)
    Context.stroke ()

    context.textbaseline= "Hanging"
    context.filltext ("Test Hello Canvas in English". ", 500,400)
    context.strokestyle=" #888 "
    Context.moveto (0,400)
    Context.lineto (800,400)
    Context.stroke ()
}

Measurement of text

Context.measuretext (string). width
Incoming arguments: string
Value returned: Width of string

Window.onload=function () {
    var canvas=document.getelementbyid (' canvas ');
    canvas.width=800;
    canvas.height=800;
    var context=canvas.getcontext (' 2d ');
    Context.fillstyle= "#058"
    context.font= "bold 20px Arial"
    context.filltext ("Hello canvas.") ", 500,100)

    var textwidth=context.measuretext (" Hello canvas "). Width
    context.filltext (" Above character width is "+textwidth+ "px", 500,300)

}

The article is to learn the canvas online drawing detailed summary of learning notes
http://www.imooc.com/learn/185
Thank the teacher.