这个 html-in-canvas和 Three.js 做的动画太炫了 html-in-canvas 允许开发者将真实的、可交互的 HTML 和 CSS 直接渲染到 <canvas>（包括 2D、WebGL 和 WebGPU）中。

Gemini 的解释： 在过去，Canvas 只是“无脑”的像素画布。如果你想在 Canvas 里渲染一段 UI 或文字，你会失去浏览器原生自带的一切能力： • 没有屏幕阅读器支持（无障碍访问彻底瘫痪）。 • 无法原生长按选中文本。 • 无法处理复杂的多语言排版、连字和字体后备。 • 连最基础的点击侦测（Hit Testing），都需要开发者手写数学公式在底层模拟。 对于构建复杂生产力工具、AI 客户端界面或图形密集型应用来说，这意味着你要么在 Canvas 之上悬浮一层 DOM（容易出现同步错位和性能瓶颈），要么就像某些头部设计软件一样，咬牙从零开始用 WebGL 重写一整套文本和布局引擎。 HTML-in-Canvas 完美解决了这个痛点： 1.底层引擎分工：让 HTML 负责它最擅长的结构、语义、排版和原生交互；让 Canvas 和 GPU 负责极致的像素级特效渲染。 2.DOM 级着色器 (Shaders)：这是它爆火的核心原因。你现在可以直接将 WebGL 片段着色器应用到标准的 HTML 元素上。比如，让一个普通的 表单在打字时产生像素级的液化扭曲、扫描线切割，或者基于鼠标位置生成精确计算的 SDF (有向距离场) 动态光影。在经过 GPU 疯狂扭曲后，这个表单依然可以正常打字和响应事件。 3.3D 空间中的真实 UI：可以极其简单地将一个功能完整的 HTML 网页，当作纹理贴图完美附着在一个 3D 旋转的立方体表面，且依然可点可交互。 核心 API 原理 它的实现机制极其精简，主要依赖三个新的原语： • layoutsubtree 属性：加在 标签上。它允许 HTML 元素作为 Canvas 的子节点存在，并参与浏览器的正常 DOM 布局树计算，但默认不绘制到屏幕上。 • drawElementImage() 方法：将 DOM 元素捕获并绘制为 Canvas 像素。它会返回一个变换矩阵（Transform Matrix），在底层自动将真实的 DOM 物理坐标与画布上像素的渲染坐标保持完美同步。 • onpaint 事件：一个全新的响应式渲染机制。取代了传统极其消耗性能的 requestAnimationFrame 轮询，只有当子元素的渲染内容真正发生变化时，才会触发重绘。

让 Opus 5.5 帮我设计了一个印章 提示词： > 用 JS + Canvas 画一枚篆书印章，印文是繁体「宝玉」，自右向左读。字形按《说文》小篆（如果我附了参考图，就照图写），不要用字体，每一笔用坐标画出来再加粗。 > 动笔前先列出每个字由哪些部件组成、各放在印面哪里。做白文和朱文两个版本，用朱砂色印泥，带一点刀刻的质感和边缘残破，背景是宣纸纹理，导出 1200×1200 的透明底 PNG。做完先截图检查每个字认不认得出、笔画间距是否均匀，有问题再改。

想增加一些内容，提升视频的质感，然后找到了Motion Canvas这个开源项目。 随手一个提示词，查看一下生成的效果，整体上质量还不错。但是还有一些细节不够完美，需要做特别的优化。 不过的话，本来就是做尝试，找一些自己喜欢的风格里面去做优化。

PixiJS v8.19.0 发布z 那个前段时间很火的HTML-in-Canvas 现已上线！ 除了 HTML-in-Canvas，PixiJS 6 月更新里还有一个很值得关注的点：官方发布了 **25 个 PixiJS Agent Skills**。

4 万行代码画出一座 14 种历史风格的可交互小镇，全身上下 0 张图片素材。 Reddit 上有个哥们用 Claude 做了个叫 的网站，可以在 14 个地区的建筑风格之间切换，全靠 Canvas 纯代码硬画。 我觉得这事最值得琢磨的，是当写代码彻底变便宜之后，人的审美和定规矩的能力是怎么变成唯一瓶颈的。 AI 的手速极快，但它没有眼睛，也不知道什么叫看着顺眼。 比如画麦地那先知寺的宣礼塔，看着老像飘在半空。 让 Claude 去改，这玩意就开始疯狂加柱墩、加挑檐、加窗户。 细节堆了一堆，毛病一点没变。 直到这哥们自己盯了半天看出来，是塔座刚好切到了前墙的边缘，人眼直接把它认成了一张贴上去的贴纸。 把塔挪回屋顶全包住，一下就对了。 他立刻把这条写进项目的记忆文件里：画面不对劲的时候，先弄清楚人眼到底在读什么信号，别上来就堆细节。 还有往镇子里加新建筑。 Claude 默认就是见缝插针，哪里有空隙往哪里塞。 同一面城墙给你开第二个大门，门外修条断头路，转头又把商队塞进合作方大厅的后院，看着跟暗算人家一样。 这哥们又定了一条死规矩：所有新建筑只准在城镇边缘批新地，同时把城墙往外推，必须按真实历史里城市长大的方式来。 如果只是糊弄一个周末玩具 Demo，现在的 AI 随便聊两句就能交差。 但凡你想攒一个体量大、经得起细看的东西，卡脖子的地方早就变了。 你首先得有眼力，能一眼看出那座塔为什么像贴纸、那座城为什么像违建。 更难的是第二步，你得把脑子里那种玄学的看着别扭，精准翻译成 AI 能执行的工程铁律，一条条写进文档锁死。 这哥们自己也说，他能镇住这 4 万行画图代码，靠的是以前上美术课、做汇报和研究历史攒下来的底子。 照这个路子演进下去，以后想拿 AI 做出好东西，再去死磕代码语法真没啥用了，我还不如趁早去少年宫报个素描班和城市规划课算了。

写方案要配一张架构图，打开画图工具拖了半天框框，需求一改又得从头调位置。 Architecture Canvas 是一个用 AI 对话画架构图的工具，上传需求文档、表格、PDF 或图片，让它读完资料先出一版初稿。 画布用的是 Excalidraw，生成的图可以手动拖动、改字，再接着用对话让它调整。 GitHub： 比较贴心的是修改方案会先列出来，点了「应用修改」才生效，手动摆好的位置和样式会尽量保留，还能把某些组件固定住。 内置 32 个常用图标，按组件含义自动匹配，导出 SVG、PNG 都行，离线也能打开。 模型不绑定，填一个兼容接口的模型地址和 Key 就能用，资料都存在本机，不配 Key 也可以先手动编辑和导出。 画分层架构和业务模块总览挺合适，写技术方案、做汇报之前可以拿它先出个草图。

用 AI 做安卓 App，界面全靠嘴说，顶上搜索栏、底下三个标签页，做出来跟脑子里那张图对不上，来回改三轮还在调位置。 M3E Canvas 换了个顺序，先在浏览器里把界面拖出来，再把这张图变成一段提示词，复制给 Claude Code、Codex 或 Cursor 去做。 组件全按 Material 3 Expressive 画，按钮、导航栏、卡片、对话框、搜索栏这些拖进屏幕就行，两个按钮靠近会自动吸成一组，圆角跟着融合。 GitHub： 屏幕可以加很多张，给按钮设一个目标屏幕和过渡动画，画布上就画出跳转箭头，预览里能真的一路点过去，返回时动画倒着放。 预览能点着走这点，我看比出图本身有用，流程顺不顺点两下就知道，不用等 Agent 做完了再发现。 主题在一个面板里调，七套配色或者给一个基准色生成整套，浅色深色、圆角方角一键切换。 屏幕在 412×892 的手机和 1280×800 的桌面之间也能切，导航栏自动变成侧边栏。 提示词支持中英日韩四种语言，目标平台选 Android 或 Web，自己写的组件行为说明也会带进去。全部存在浏览器本地，没有后台，打开网页就能用。

把架构图画成可拖、可分享的图 现在有个开源 skill 直接干这事 名字叫 draw-architecture 你丢一段文字描述的系统架构 它吐一张像 Figma 一样的 canvas： 拖拽、缩放、点元件隔离看 一键导出高清 PNG 丢进文档/PPT 还能把链接甩给同事在图上留言 平时跟团队对架构 最烦的不是「画不出来」 是图画完就死了 别人只能看截图 这种「可交互 + 可讨论」才是协作资产