🎨 OpenClaw Canvas 完全指南

AI 驱动的可视化 · 交互式演示 · 数据看板
让 AI 直接"画"出你想要的内容

📅 2026-06-09⏱️ 阅读 10 分钟🏷️ Canvas · Visualization · A2UI

1. 什么是 Canvas？

Canvas 是 OpenClaw 的可视化功能，允许 AI Agent 创建、展示、交互和截图网页内容。它本质上是一个受控的浏览器环境，AI 可以：

能力	说明	操作
🖥️ 展示页面	打开一个 URL 或本地 HTML	present
⚡ 执行代码	在页面中执行 JavaScript	eval
📸 截图捕获	对页面进行截图	snapshot
🤖 AI 生成 UI	AI 直接生成可交互的 UI	a2ui_push
🔄 重置	清空 Canvas 内容	a2ui_reset / hide

💡 核心价值：Canvas 让 AI 从"生成文本"进化到"生成可视化内容"。你可以让 AI 画图表、做数据看板、生成交互式演示，然后截图保存或直接展示。

2. Canvas 操作一览

// 展示一个页面
canvas({ action: "present", url: "https://example.com" })

// 执行 JavaScript
canvas({
  action: "eval",
  javaScript: "document.body.style.background = 'linear-gradient(135deg, #667eea, #764ba2)'"
})

// 截图
canvas({ action: "snapshot", outputFormat: "png" })

// AI 生成 UI
canvas({
  action: "a2ui_push",
  jsonl: '{"type":"heading","text":"数据看板"}\n{"type":"paragraph","text":"实时数据"}'
})

// 隐藏 Canvas
canvas({ action: "hide" })

3. present：展示页面

// 展示远程 URL
canvas({
  action: "present",
  url: "https://miaoquai.com/tools/",
  width: 1200,
  height: 800
})

// 展示本地文件
canvas({
  action: "present",
  url: "file:///var/www/miaoquai/index.html"
})

// 在指定 Gateway 上展示
canvas({
  action: "present",
  url: "https://miaoquai.com",
  gatewayUrl: "https://my-gateway.example.com"
})

4. eval：执行 JavaScript

在 Canvas 中的当前页面上执行 JavaScript，可以实现动态修改、数据提取、交互操作等。

📊 动态修改页面样式

canvas({
  action: "eval",
  javaScript: `
    // 修改背景色
    document.body.style.background = 'linear-gradient(135deg, #1a1a2e, #16213e)';
    document.body.style.color = '#fff';
    
    // 添加动画
    const style = document.createElement('style');
    style.textContent = '@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }';
    document.head.appendChild(style);
  `
})

📈 提取页面数据

canvas({
  action: "eval",
  javaScript: `
    // 提取所有链接
    const links = Array.from(document.querySelectorAll('a'))
      .map(a => ({ text: a.textContent.trim(), href: a.href }));
    JSON.stringify(links);
  `
})

5. snapshot：截图捕获

// PNG 截图
canvas({
  action: "snapshot",
  outputFormat: "png",
  quality: 90
})

// JPEG 截图（更小体积）
canvas({
  action: "snapshot",
  outputFormat: "jpeg",
  quality: 80
})

// 全页面截图
canvas({
  action: "snapshot",
  fullPage: true
})

💡 实战技巧：先用 present 打开页面，再用 eval 调整样式，最后用 snapshot 截图。这个三步组合可以生成精美的分享图片。

6. A2UI：AI 生成 UI

A2UI（AI to UI）是 Canvas 最强大的功能，让 AI 直接生成可交互的 UI 组件。

📋 JSONL 格式

// A2UI 使用 JSONL（每行一个 JSON 对象）描述 UI
canvas({
  action: "a2ui_push",
  jsonl: [
    '{"type":"heading","text":"📊 网站数据看板","level":1}',
    '{"type":"paragraph","text":"实时监控 miaoquai.com 的关键指标"}',
    '{"type":"divider"}',
    '{"type":"heading","text":"今日数据","level":2}',
    '{"type":"list","items":["页面浏览量: 12,345","独立访客: 3,456","平均停留: 2m 30s"]}',
    '{"type":"heading","text":"趋势图","level":2}',
    '{"type":"chart","chartType":"line","data":{"labels":["Mon","Tue","Wed"],"values":[100,150,130]}}'
  ].join('\n')
})

🎨 支持的组件类型

类型	说明	示例
heading	标题	{"type":"heading","text":"标题","level":2}
paragraph	段落	{"type":"paragraph","text":"内容"}
list	列表	{"type":"list","items":["项1","项2"]}
code	代码块	{"type":"code","language":"js","code":"..."}
chart	图表	{"type":"chart","chartType":"bar","data":{}}
table	表格	{"type":"table","headers":[],"rows":[]}
divider	分隔线	{"type":"divider"}
image	图片	{"type":"image","src":"url","alt":"描述"}

7. 实战场景

场景	实现方式	输出
📊 数据看板	A2UI 生成图表 + snapshot 截图	分享图片
📰 新闻日报	present 本地 HTML + eval 美化	精美页面
📈 SEO 报告	A2UI 生成表格 + snapshot	飞书卡片
🎨 海报生成	eval 注入样式 + snapshot	社交媒体图片
🔍 代码审查	A2UI 代码块 + 高亮	审查报告
📱 移动端预览	present + 设定小尺寸	响应式检查

8. 最佳实践

✅ 先 present 再 eval，确保页面加载完成
✅ A2UI 用 JSONL，每行一个组件
✅ 截图前等渲染，给页面足够的渲染时间
✅ 全页面截图用 fullPage，不遗漏内容
✅ 用 hide 清理，释放 Canvas 资源
❌ 不要在 snapshot 前执行大量 DOM 操作，可能导致渲染异常
❌ 不要忘记设置 width/height，影响截图质量

🔗 相关教程

浏览器自动化子 Agent 模式日报系统 Skill 开发术语百科

🚀 让 AI 直接"画"出你想要的内容

探索妙趣AI →