HTML5中Canvas的drawText对齐细节

最近接触的项目中，UI纯Html5，这可苦了我这个习惯Android native控件的程序员，其中画字对齐的细节部分困扰我很久。Anyway，总算是搞定

context对象可以设置以下 text 属性：

font：文字字体，同 CSSfont-family 属性

textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.

textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic

有两个方法可以绘制文字： fillText和 strokeText。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。还有一个可选选项——最大宽度。如果需要的话，浏览器会缩减文字以让它适应指定宽度。

文字对齐属性影响文字与设置的(x,y) 坐标的相对位置。

比如说，

                this.drawContext.textAlign = "center";
           this.drawContext.textBaseline = "middle";

之后，drawText 中的x和y,代表着字的整体中心，而这两个对齐，是以这个x,y点坐标对齐。这一点极容易搞错！

同样的，默认对齐方式，是左下角对齐，也就是说，和普通的盒式布局的坐标不同，默认的drawText坐标，是从左下角算的，而非左上角！