PixiJS 火了：HTML-in-Canvas 真的落地了！

原文链接：https://mp.weixin.qq.com/s/CSbc9iKMvF57ByBMLNHHew 来源：前端开发爱好者 发布时间：2026-06-23

摘要

PixiJS v8.19.0 正式支持 HTML-in-Canvas——可以把真实 DOM 元素渲染成 texture，进入 GPU 管线。不是 html2canvas 那种模拟截图，而是浏览器底层能力，DOM 仍然保留交互（输入框可编辑、链接可点击、CSS animation 继续跑），同时被 PixiJS 当作纹理参与渲染、动画、滤镜、合成。长期来看，这是"HTML 负责布局交互 + PixiJS 负责渲染合成"的新范式。

为什么重要：两个世界的割裂

Web 前端长期存在两个割裂的世界：

	DOM	Canvas/WebGL/WebGPU
擅长	UI、文本、布局、表单、交互	高性能渲染、游戏、特效、复杂动画
弱点	进不了 GPU 渲染链路	写 UI 要重新造轮子

想把两者融合，传统方式是 Canvas 上浮 DOM，两边靠坐标同步——项目复杂一点就全是边界问题（缩放不同步、旋转滤镜脱节、截图导出缺内容）。

PixiJS 这次做了什么

新增 HTMLSource 和 ElementImageSource：

import { HTMLSource } from 'pixi.js/html-source';

const form = document.createElement('form');
form.innerHTML = '<input value="still editable" />';

const sprite = Sprite.from(
  new HTMLSource({ resource: form, autoUpdate: true })
);
app.stage.addChild(sprite);

关键点：

• form 依然是真实 DOM，输入框仍可编辑、链接仍可点击、CSS animation 继续运行
• 同时又被 PixiJS 当作 texture——可位移、缩放、滤镜、混合模式，和粒子/遮罩/后处理一起合成
• 不是 html2canvas 模拟渲染，不是 SVG hack，是浏览器层面的 HTML-in-Canvas

Canvas 写 UI 的痛苦被松动

用 Canvas 做复杂 UI 需要自己处理：文本换行、中英文/Emoji 混排、字体加载同步、输入框、光标闪烁、滚动区域、hover/focus/disabled/selected 状态、屏幕阅读器、移动端 DPR 缩放……

HTML-in-Canvas 的思路：用浏览器最成熟的方式（HTML + CSS）写 UI，然后把渲染结果交给 Canvas/WebGL/WebGPU 使用。HTML 负责布局和交互，PixiJS 负责渲染和合成。

应用场景

• 游戏 UI（HTML 写界面 + Canvas 渲染）
• 数据可视化（图表 + HTML 标签）
• 海报生成（直接导出）
• WebGL / 3D UI（HTML 作为纹理）
• 设计工具（富文本 + 实时渲染）

另一个重要更新：25 个 PixiJS Agent Skills

PixiJS 同步发布了 25 个面向 AI 编程工具的 Skills，教 Claude Code / Cursor / Codex / Copilot 正确使用 PixiJS v8，避免生成过时的 v7 写法。从 v8.19.0 起随 npm 包发布在 node_modules/pixi.js/skills/。

核心信号

PixiJS 这次不是普通发版，同时在适配两个方向：

• 下一代 Web 渲染能力（HTML + Canvas + GPU 打通）
• 下一代 AI 编程工作流（Agent Skills）

长期趋势清晰：HTML 写界面 → PixiJS 驱动渲染 → GPU 完成合成——DOM 不再只是页面结构，Canvas 不再只是像素画布，HTML 有机会进入 GPU 渲染链路。

• 相关文档：https://pixijs.com/blog/june-2026