直接用<script>引入PixiJS即可运行，无需构建工具；通过CDN加载v7.4.0版本，创建PIXI.Application并append app.view到body，再往app.stage添加Sprite或Graphics等内容才能显示画面。
直接用 <script> 引入 PixiJS 就能跑起来，不需要构建工具、不用配 Webpack、不强制用 TypeScript——这是它对新手最友好的地方。
怎么在 HTML 里快速加载 PixiJS 并渲染出画面
别碰构建流程，先让画布动起来。CDN 是最快验证是否可行的方式，尤其适合原型、活动页或临时调试：
- 确保
<body>是空的或留有干净容器（比如一个<div id="app"></div>） - 在
<body>底部加 script 标签，用官方 CDN（v7.4.x 是当前稳定版）：<script src="https://pixijs.download/v7.4.0/pixi.min.js"></script>
- 紧接着写初始化代码：
<script> const app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x2c3e50 }); document.body.appendChild(app.view); </script> - 注意：
app.view是一个<canvas>元素，必须插入 DOM 才可见；如果页面已有 CSS 重置了canvas的 display 或尺寸，可能黑屏或缩成一条线
为什么 PIXI.Application 初始化后没显示内容
常见不是代码错，而是环境或理解偏差：
-
PIXI.Application只创建渲染器和舞台（app.stage），但默认什么也不画——你得手动往app.stage里加东西，比如一个PIXI.Sprite或PIXI.Graphics - 如果用了
antialias: true但浏览器禁用了 WebGL（如某些企业内网策略），app.renderer.type会是CANVAS，此时抗锯齿可能无效，图形边缘发虚，可临时关掉试试 - Canvas 的实际像素尺寸由
width/height参数决定，不是 CSS 宽高；若只设了style.width没设初始化参数，会出现拉伸、模糊 - 部分广告拦截插件或隐私模式会屏蔽
WebGLRenderingContext创建，控制台报Failed to create WebGL context，这时自动回退到 Canvas，但性能下降明显
用 PIXI.Sprite.from 加载图片时一直黑块或报 404
这是新手卡住最多的地方，本质是资源加载异步性 + 路径问题：
立即学习“前端免费学习笔记（深入）”；
-
PIXI.Sprite.from('logo.png')是“懒加载”，它会在首次渲染时才尝试拉取图片，失败不抛错，只留黑块——所以要主动监听加载状态 - 推荐改用
PIXI.Assets.load()（v7 推荐方式）：await PIXI.Assets.load('logo.png'); const sprite = new PIXI.Sprite(PIXI.Texture.from('logo.png')); - 路径必须相对 HTML 文件，不是 JS 文件；比如 HTML 在
/index.html，图片在/assets/logo.png，就写'assets/logo.png'，别写./assets/logo.png（.在浏览器里无意义） - 本地双击打开 HTML（
file://协议）会触发 CORS，图片加载失败；必须起个本地服务，比如npx serve或 VS Code Live Server 插件
真正容易被忽略的点是：PixiJS 不处理跨域图片的 crossOrigin 属性自动设置。如果你从其他域名加载图片（比如 CDN），得手动传 { crossOrigin: true } 给 Assets.load，否则纹理无法读取、滤镜失效、截图空白。
