HTML5 Canvas Text文本居中实例

<canvas width="700" height="300" id="canvasOne" class="canvasOne"></canvas>
<script>
var cancasOne = document.getElementById('canvasOne');
var ctx = cancasOne.getContext('2d');
var text = '后会无期',
textMetrics,
square_width = 20,
font_height = 128;
//画网线
function drawGrid(color, stepx, stepy) {
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = 0.5;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvasOne.width, canvasOne.height);
//画竖线
for (var i = stepx + 0.5; i < canvasOne.width; i += stepx) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvasOne.height);
ctx.stroke();
}
//画横线
for (var i = stepx + 0.5; i < canvasOne.height; i += stepy) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvasOne.width, i);
ctx.stroke();
}
ctx.restore();
}
//画文本
function drawText() {
ctx.fillStyle = 'orange';
ctx.strokeStyle = 'cornflowerblue';
ctx.fillText(text, canvasOne.width / 2,
canvasOne.height / 2);
ctx.strokeText(text, canvasOne.width / 2,
cancasOne.height / 2);
}
//画中间的小正方形
function drawCenterSquare() {
ctx.fillStyle = 'rgba(255,0,0,0.4)';
ctx.strokeStyle = 'black';
ctx.fillRect(canvasOne.width / 2 - square_width / 2,
canvasOne.height / 2 - square_width / 2,
square_width, square_width);
ctx.strokeRect(canvasOne.width / 2 - square_width / 2,
cancasOne.height / 2 - square_width / 2,
square_width, square_width);
}
ctx.font = '128px Helvetica';
ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式
ctx.textAlign = 'center';//设置文本的水平对齐方式
textMetrics = ctx.measureText(text);
drawGrid('lightgray', 10, 10);
drawText();
drawCenterSquare();
</script>