PixiJS中调用appendChild(app.view)触发TypeError错误的求助

核心问题 #

你在普通JavaScript环境（HTML的script标签）里使用了TypeScript的泛型语法 <HTMLCanvasElement>，这会导致PIXI.Application初始化异常，最终app.view不是有效的DOM节点（Canvas元素），调用appendChild时触发类型错误。

修复步骤 #

1. 移除泛型声明：直接创建PIXI.Application实例，普通JS不支持TypeScript的泛型约束，修改后的代码如下：

<script>
    window.onload = function() {
       let app = new PIXI.Application({
            width: 800,
            height: 600,
            background: '#1099bb'
        });
        
       document.body.appendChild(app.view);
    }
</script>

2. 确认PixiJS加载正常：检查页面是否正确引入了PixiJS 7.4.0脚本，确保该脚本在你的自定义script标签之前加载，示例CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.4.0/pixi.min.js"></script>

3. 若需使用TypeScript：
   • 将代码放在.ts文件中，通过TypeScript编译器编译为JavaScript后再引入页面。
   • 或在script标签添加type="module"并配置TypeScript编译选项，此方式需额外环境配置。

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