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

说明讲解：

createjs.Stage(canvas HTML)

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

Text.getBounds();

stage.addChild(displayObject);

stage.update();

//居中文字另一种方法
var text5 = new createjs.Text("Hello World", "20px Arial", "#ff7700");

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

效果展示：