要对齐HTML5 Canvas文本，我们可以使用画布上下文的textAlign属性，该属性可以设置为开始，结束，左，中或右。 对齐是相对于文本的x位置处的假想垂直线，由fillText（）或strokeText（）定义。
当textAlign属性设置为left，设置为start并且文档方向为ltr（从左到右），或者设置为end并且文档方向为rtl（从右到左）时，文本对齐到左侧。 当textAlign属性设置为right，设置为end并且文档方向为ltr时，或者设置为start并且文档方向为rtl时，文本将右对齐。 除非另有说明，否则textAlign属性默认为启动。
html代码：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText('Hello World!', x, y);
</script>
</body>
</html>
1230博客
热门推荐：