首页 资讯 下载 教程 Skills 社群

Canvas 画布交互指南

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 体验。