canvas(四) 绘制文字

canvas 提供了两种方法绘制文本：

fillText(text,x,y [,maxWidth])

在指定位置的（x,y）位置填充指定的文本，绘制的最大宽度是可选的。

strokeText(text,x,y, [,maxWidth])

在指定的位置绘制文本边框

font = value

设置文本的尺寸，默认字体是 10px sans-serif 。

textAlign = value

文本对气项，可选的值包括： start end leftright center默认值为 start 。

textBaseline value

基线对齐选项。可选的值包括： top hanging middle alphabetic ideographic bottom 默认值为 alphabetic

direction = value

文本方向，可用值： ltrrtlinherit 默认值是 inherit 。

当需要更多文本细节时，可以使用 measureText() 返回含文本特性的对象。

这个看楼主是具体要怎么实现了，其实文字层也是可以直接加在CANVAS上的，而如果是用CANVAS文字的画，是要有一些特别的代码的，可以去参考国内外的一些成熟的2D游戏引擎，一般都会有文字的实现。

<canvas id="t_con" height="200px" width="200px"></canvas>

<script>

var ele = document.getElementById("t_con")

var ctx = ele.getContext("2d")

// 字号为60px ,字体为impact

ctx.font = "30px impact"

//将文本填充为棕色

ctx.fillStyle = "#960"

//将文本设为居中对齐

ctx.textAlign = 'center' //规定变换 *** 控点的位置

//设置文字

ctx.fillText("Happy Trails!", 100, 55, 400)//参数为fillText(文本内容, 变换 *** 控点的x坐标, 变换中心的y坐标, 文本最大宽度)

</script>

---