canvas实现文字水平居中 死活无效的处理方法
我们先在html中加入canvas标签，如下：<canvas id="myCanvas" width="500" height="300">
接下来呢，我们就要开始用canvas的api来实现了，我们先在画布上加入文字：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = 'bold 18px sans-serif';
ctx.fillText('易做图，容易做图', 10, 200);
在这里呢，注意fillText这个方法，它一共有四个参数，ctx.fillText(text, x, y, maxWidth)，
分别是text(在画布上输出的文本)
x(文字在画布x轴的坐标位置)
y(文字在画布y轴的坐标位置)
maxWidth(可选。允许的最大文本宽度，以像素计)
文字水平居中有这么一个方法叫：ctx.textAlign，乍一看跟css的text-align:center一样，那么我们把这个方法加上去结果如何呢，你会发现文字并没有按照理想的状态水平对齐
那么到底怎样才能让他水平居中呢，其实非常简单，我们只需要将fillText的第二个参数，也就是文字在x轴的位置，设置为canvas宽度的一半就可以实现了。
全部代码如下：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="300" >
您的浏览器不支持H5
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('易做图，容易做图', 250, 200);
</script>
</body>
</html>
