canvas——绘制文字

1、 绘制上下文的文字属性 

 

font  设置或返回文本内容的当前字体属性
    * font 属性使用的语法与 CSS font 属性相同。

例如：ctx.font = "18px '微软雅黑'";

textAlign    设置或返回文本内容的当前对齐方式
    * start :    默认。文本在指定的位置开始。
    * end   :    文本在指定的位置结束。
    * center:    文本的中心被放置在指定的位置。
    * left  :    文本左对齐。

 

    * right :    文本右对齐。  

    

 例如：ctx.textAlign = 'left';         

textBaseline     设置或返回在绘制文本时使用的当前文本基线   
    * alphabetic ：   默认。文本基线是普通的字母基线。
    * top        ：   文本基线是 em 方框的顶端。。
    * hanging    ：   文本基线是悬挂基线。
    * middle     ：   文本基线是 em 方框的正中。
    * ideographic：   文本基线是em基线。

 

    * bottom     ：   文本基线是 em 方框的底端。

 

     

 

    例如： ctx.textBaseline = 'top';
    单词:
     alphabetic: 字母的；照字母次序的   [,ælfə'bɛtɪk]

 

     ideographic：表意的；表意字构成的   英 [,ɪdɪəʊ'ɡræfɪk]   美 [,ɪdɪə'græfɪk]

2、上下文绘制文字方法  

 

    * ctx.fillText()      在画布上绘制“被填充的”文本
    * ctx.strokeText()    在画布上绘制文本（无填充）
    * ctx.measureText()   返回包含指定文本宽度的对象
    * 单词：measure 测量；估量；权衡   英 ['meʒə]   美 ['mɛʒɚ]

    //综合案例代码：
    ctx.moveTo( 300, 300 );
    ctx.fillStyle = "purple";               //设置填充颜色为紫色
    ctx.font = '20px "微软雅黑"';           //设置字体
    ctx.textBaseline = "bottom";            //设置字体底线对齐绘制基线
    ctx.textAlign = "left";                 //设置字体对齐的方式
    //ctx.strokeText( "left", 450, 400 );

 

    ctx.fillText( "Top-g", 100, 300 );        //填充文字

	
		
		
	


	

		
			你的浏览器不支持canvas，请升级浏览器
		
	

	

效果：