js+html绘制文字居中,CreateJs系列教程之 EaselJs_2_绘制文字（Text）

核心Js代码：

var canvas,

stage,

w = window.innerWidth,

h = window.innerHeight;

function init() {

//设置canvas属性

canvas = document.getElementById('game');

canvas.width = w;

canvas.height = h;

//创建舞台

stage = new createjs.Stage(canvas);

//绘制居中文字

var text1 = new createjs.Text("Hello World", "20px Arial", "#ff4400"),

bounds = text1.getBounds();

text1.x = stage.canvas.width - bounds.width >> 1;

text1.y = stage.canvas.height - bounds.height >> 1;

//绘制左边文字

var text2 = new createjs.Text("Hello World", "20px Arial", "#ff4400");

//绘制右边文字

var text3 = new createjs.Text("Hello World", "40px Arial", "#ff4400"),

bounds = text3.getBounds();

text3.x = w - bounds.width;

//下居中文字

var text4 = new createjs.Text("Hello World", "20px Arial", "#ff7700"),

bounds = text4.getBounds();

text4.x = stage.canvas.width - bounds.width >> 1;

text4.y = stage.canvas.height - bounds.height;

stage.addChild(text1);

stage.addChild(text2);

stage.addChild(text3);

stage.addChild(text4);

stage.update();

}

说明讲解：

1：绘制舞台类

createjs.Stage(canvas HTML)

2：绘制文字类

createjs.Text('text', 'font-size font-family', '#color')

3：获得文字边界属性

Text.getBounds();

其中包含的属性有： width，height等；

4：添加到舞台

stage.addChild(displayObject);

5：更新画板显示出来

stage.update();

6：追加居中的另一种方式

//居中文字另一种方法

var text5 = new createjs.Text("Hello World", "20px Arial", "#ff7700");

text5.textAlign = 'center';//以自身的位置居中，自己的宽度，0 width/2，width

text5.x = stage.canvas.width / 2;

效果展示：