Canvas 是什么
Canvas 是 OpenClaw macOS 应用内嵌的一个轻量可视化工作区,基于 WKWebView 渲染,支持完整的 HTML/CSS/JavaScript。AI 智能体可以通过 Canvas 向你展示动态图表、交互式 UI 组件、数据可视化界面,甚至通过 A2UI 协议推送结构化界面更新。
Canvas 以无边框可调整大小的浮动面板形式出现,锚定在菜单栏附近,记住上次的位置和尺寸。
文件存储位置
Canvas 内容存储在:
~/Library/Application Support/OpenClaw/canvas/<session>/
文件通过自定义 URL Scheme 访问:
openclaw-canvas://main/ → 对应 index.html
openclaw-canvas://main/assets/app.css
openclaw-canvas://main/widgets/todo/ → 对应 widgets/todo/index.html
如果该目录下没有 index.html,Canvas 会显示内置的默认占位页面。
基本操作命令
通过 CLI 控制 Canvas:
# 展示 Canvas 面板
openclaw nodes canvas present --node <id>
# 导航到指定路径或 URL
openclaw nodes canvas navigate --node <id> --url "/"
# 执行 JavaScript
openclaw nodes canvas eval --node <id> --js "document.title"
# 截取 Canvas 当前画面
openclaw nodes canvas snapshot --node <id>
导航目标可以是本地路径(使用 canvas scheme)、http(s):// 外部 URL,或 file:// 路径。
绘图示例
在 Canvas 上使用 JavaScript 绘制图形:
openclaw nodes invoke --node "macOS Node" --command canvas.eval \
--params '{
"javaScript": "(() => {
const {ctx} = window.__openclaw;
ctx.clearRect(0, 0, innerWidth, innerHeight);
ctx.lineWidth = 6;
ctx.strokeStyle = \"#ff2d55\";
ctx.beginPath();
ctx.moveTo(40, 40);
ctx.lineTo(innerWidth - 40, innerHeight - 40);
ctx.stroke();
return \"ok\";
})()"
}'
A2UI 协议集成
A2UI(Agent-to-UI)是 OpenClaw 的结构化界面协议,允许 AI 以声明式方式更新 Canvas 内容,而无需手写 HTML。macOS 上支持 A2UI v0.8 消息类型:
beginRendering:初始化渲染上下文surfaceUpdate:更新界面区域dataModelUpdate:更新数据绑定deleteSurface:移除界面元素
快速推送文本示例:
openclaw nodes canvas a2ui push --node <id> --text "Hello from A2UI"
注意:
createSurface(v0.9 新增)目前不支持。
从 Canvas 触发 AI 任务
Canvas 中的 JavaScript 可以通过深链接唤起 AI 执行任务:
// 点击按钮后触发 AI 审查当前设计
document.getElementById('review-btn').addEventListener('click', () => {
window.location.href = "openclaw://agent?message=Review%20this%20design";
});
没有有效认证 key 时,应用会弹出确认对话框;配置了 key 的个人自动化场景可无人值守执行。
安全机制
- Canvas URL Scheme 阻止目录遍历,所有文件必须位于 session 根目录下
- 本地内容使用自定义 Scheme 访问,不走 loopback 服务器
- 外部 URL 仅在显式导航时才被允许加载
开关与会话管理
- 在 macOS 应用设置中可关闭 Canvas(Settings → Allow Canvas)
- 关闭后调用 Canvas 命令会返回
CANVAS_DISABLED错误 - 同一时间只有一个 Canvas 面板可见,多个 session 需要切换
Canvas 是 OpenClaw 从文字交互升级到可视化交互的核心能力,结合 A2UI 协议可以构建完整的 AI 驱动 UI 体验。