为何无法看到从类文件创建的messageField文本？

问题根源梳理 #

你的代码里有几个关键错误导致文本无法显示，逐一拆解：

• 颜色值无效：#OOOOOO用了字母O而非数字0，浏览器无法识别这个颜色，文本会呈现透明状态。
• 重复创建Stage/Canvas：init方法里重新获取canvas并创建新Stage实例，覆盖了Animate初始化好的this.root.stage，导致和Animate内置渲染流程脱节。
• 添加错误的文本对象：你创建了this.messageField，但调用stage.addChild时传入的是this.root.messageField（Animate场景中可能不存在或未初始化的对象），自己创建的文本根本没被添加到舞台。
• 属性引用错误：设置文本位置时用了canvas.width，未通过this.引用实例的canvas属性，可能导致取值失败。
• Stage更新时机错误：Animate的HTML5项目会通过内置tick事件自动更新舞台，手动调用stage.update(e)会被后续自动更新覆盖或失效。

修正后的代码 #

class Game
{
    constructor(root, lib)
    {
        this.root = root;
        this.stage = this.root.stage; // 直接使用Animate自带的Stage实例
        this.canvas = this.root.canvas; // 直接使用Animate自带的Canvas实例
        this.lib = lib;
        this.keys = {};
        this.init(); // 调整初始化顺序
    }
    
    init(e){
        this.player = this.root.player_mc;
        
        const game = this;
        
        document.addEventListener("keydown", (e) => {
            console.log(`Key "${e.key}" pressed [event: keydown]`);
            this.keys[e.key] = true;
        });
        document.addEventListener("keyup", (e) => {
            console.log(`Key "${e.key}" released [event: keyup]`); // 修正日志事件类型
            this.keys[e.key] = false;
        });
    
        // 消息文本创建逻辑
        this.messageField = new createjs.Text("Loading", "bold 68px Arial", "#000000"); // 修正颜色值为黑色
        this.messageField.maxWidth = 1000;
        this.messageField.textAlign = "center";
        this.messageField.textBaseline = "middle";
        this.messageField.x = this.canvas.width / 2; // 正确引用实例的canvas属性
        this.messageField.y = this.canvas.height / 2;
        this.stage.addChild(this.messageField); // 添加自己创建的文本到舞台
        
        console.log(this.messageField.text);
    }
}

修改说明 #

1. 移除重复创建的Stage/Canvas实例，复用Animate传入的root对象中的舞台和画布，保证与Animate渲染流程兼容。
2. 修正颜色值为#000000（数字0），确保文本颜色可被识别。
3. 将stage.addChild的参数改为this.messageField，把自定义文本对象添加到舞台。
4. 修正位置计算时的属性引用，使用this.canvas.width获取画布尺寸。
5. 移除手动调用的stage.update(e)，依赖Animate内置的tick事件自动更新舞台。
6. 修正keyup事件的日志文本，避免事件类型混淆。

内容的提问来源于stack exchange，提问作者subtlefly