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

1. 6：追加 居中的另外一種方式

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

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

效果展現：