html5 设置文本居中,HTML5 Canvas Text文本居中实例

varcancasOne=document.getElementById('canvasOne');varctx=cancasOne.getContext('2d');vartext= '后会无期',

textMetrics,

square_width= 20,

font_height= 128;//画网线

functiondrawGrid(color, stepx, stepy) {

ctx.save();

ctx.strokeStyle=color;

ctx.lineWidth= 0.5;

ctx.fillStyle= '#ffffff';

ctx.fillRect(0,0, canvasOne.width, canvasOne.height);//画竖线

for(vari=stepx+ 0.5; i

ctx.beginPath();

ctx.moveTo(i,0);

ctx.lineTo(i, canvasOne.height);

ctx.stroke();

}//画横线

for(vari=stepx+ 0.5; i

ctx.beginPath();

ctx.moveTo(0, i);

ctx.lineTo(canvasOne.width, i);

ctx.stroke();

}

ctx.restore();

}//画文本

functiondrawText() {

ctx.fillStyle= 'orange';

ctx.strokeStyle= 'cornflowerblue';

ctx.fillText(text, canvasOne.width/ 2,

canvasOne.height/ 2);

ctx.strokeText(text, canvasOne.width/ 2,

cancasOne.height/ 2);

}//画中间的小正方形

functiondrawCenterSquare() {

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();