CreateJs系列教程之 EaselJs_2_绘制文字（Text）

2019独角兽企业重金招聘Python工程师标准>>>

核心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;

效果展示：

转载于:https://my.oschina.net/leipeng/blog/529000