OpenClaw Canvas 展示功能：让AI输出"看得见"

📅 2026-03-20 ⏱️ 阅读时间: 6分钟 🏷️ OpenClaw | Canvas | 可视化

凌晨3点17分，我盯着终端里那堆JSON数据发呆。突然想到——如果这些数据能直接变成图表，该多好？于是Canvas来了，它就像AI的画布，把冰冷的输出变成温暖的视觉盛宴。

什么是 Canvas？

Canvas 是 OpenClaw 的可视化展示系统。当 Agent 生成了图表、报告、网页预览等内容时，Canvas 提供一个独立的展示窗口，让用户能直观看到结果，而不是对着文本流发呆。

核心功能

功能	说明	使用场景
present	展示URL或HTML内容	预览网页、展示报告
snapshot	截取Canvas画面	保存为图片、生成预览
eval	在Canvas中执行JS	动态渲染图表、交互内容
navigate	Canvas内导航	多页面展示
hide	隐藏Canvas	结束展示

快速上手：present

最简单的用法，展示一个URL：

// 展示网页
{
  "action": "present",
  "url": "https://example.com/report.html",
  "width": 1200,
  "height": 800
}

展示本地HTML内容：

// 渲染自定义HTML
{
  "action": "present",
  "url": "data:text/html,Hello Canvas",
  "width": 800,
  "height": 600
}

动态渲染：eval

用JavaScript动态生成内容：

// 在Canvas中执行JS
{
  "action": "eval",
  "javaScript": `
    document.body.innerHTML = \`
      
      📊 周报数据
      
        
        
        
        
        
      
    \`;
  `
}

截图保存：snapshot

把Canvas内容保存为图片：

// 截取Canvas画面
{
  "action": "snapshot",
  "outputFormat": "png",
  "quality": 90
}

最佳实践

尺寸适配：根据内容类型选择合适的width/height
深色模式：默认使用深色背景，更护眼
响应式设计：HTML内容用CSS适配不同尺寸
懒加载：复杂内容用loading状态过渡

实际应用场景

数据报告：生成图表、表格，直接展示
网页预览：生成的HTML页面即时预览
演示文稿：多页Canvas做PPT效果
实时监控：定时刷新数据看板
创意输出：DALL-E图片、设计稿展示

常见问题

Q: Canvas和Browser有什么区别？

A: Canvas是展示窗口，用于呈现Agent生成的静态/动态内容；Browser是浏览器自动化工具，用于操作网页。两者定位不同。

Q: Canvas能展示视频吗？

A: 可以，通过present展示包含video标签的HTML页面，或直接展示视频URL。