"下午4点22分，我的Agent正在给我演示一个新功能。它在屏幕上画了一个流程图，然后用箭头一步步解释每个步骤。我指着其中一块问：'这里能再详细说说吗？' 它立刻在那个区域放大了视图，添加了注释。那一刻，我感觉我不是在和代码对话，而是在和一个耐心的老师在交流。"
世界上有一种沟通叫"图文并茂"。当Agent能展示画面、截取屏幕、渲染可视化内容时，它就不再是一个只会说话的程序，而是一个可视化助手。OpenClaw的Canvas工具，让这一切成为可能。
🎨 什么是Canvas？
OpenClaw的Canvas是一个可视化画布系统，Agent可以通过它：
- 展示HTML/CSS/JavaScript渲染的内容
- 截取屏幕截图
- 执行页面上的JavaScript
- 创建交互式演示
- 可视化数据和分析结果
🛠️ Canvas核心功能
截图
捕获渲染内容
评估
执行JavaScript
展示
渲染HTML内容
导航
加载URL内容
A2UI
交互式界面
快照
当前状态捕获
📝 使用方法
1. 展示内容（present）
渲染HTML到Canvas
canvas({
action: "present",
url: "https://example.com/dashboard"
})2. 截取屏幕（snapshot）
捕获Canvas当前状态
canvas({
action: "snapshot",
outputFormat: "png",
width: 1200,
height: 800
})3. 执行JavaScript（eval）
在Canvas中运行JS代码
canvas({
action: "eval",
javaScript: `
// 在页面上下文中执行
const data = document.querySelectorAll('.metric');
return Array.from(data).map(el => el.textContent);
`
})4. 导航到URL（navigate）
加载指定页面
canvas({
action: "navigate",
url: "https://charts.example.com/data-viz"
})5. 隐藏Canvas（hide）
关闭Canvas展示
canvas({
action: "hide"
})💡 实战场景
场景1：数据可视化演示
生成并展示图表
async function showDataVisualization(data) {
// 1. 生成HTML图表
const html = `
`;
// 2. 保存临时文件
writeFile('/tmp/chart.html', html);
// 3. 展示
canvas({
action: "present",
url: "file:///tmp/chart.html"
});
// 4. 截图保存
setTimeout(() => {
canvas({
action: "snapshot",
outputFormat: "png",
filePath: "/var/www/miaoquai/images/data-viz.png"
});
}, 2000);
}场景2：UI组件展示
展示设计的UI组件
async function showcaseComponent(componentHTML) {
const wrapper = `
组件预览
${componentHTML}
`;
canvas({
action: "present",
html: wrapper,
width: 800,
height: 600
});
}场景3：网站监控截图
定时截取网站状态
async function captureWebsiteStatus(url) {
// 1. 导航到目标网站
canvas({
action: "navigate",
url: url
});
// 2. 等待加载
await new Promise(r => setTimeout(r, 3000));
// 3. 截图
const screenshot = await canvas({
action: "snapshot",
outputFormat: "png",
fullPage: true
});
// 4. 保存
writeFile(`/var/www/miaoquai/screenshots/${Date.now()}.png`, screenshot);
return screenshot;
}
// 设置定时任务
cron({
name: "网站监控截图",
schedule: { kind: "every", everyMs: 3600000 },
payload: {
kind: "agentTurn",
message: "截取miaoquai.com首页并保存"
}
})场景4：交互式A2UI
创建交互式界面
// 推送A2UI界面
canvas({
action: "a2ui_push",
jsonl: JSON.stringify([
{ type: "header", text: "任务管理面板" },
{ type: "button", id: "refresh", text: "刷新数据" },
{ type: "table", data: tasks }
])
})Canvas最佳实践
• 截图前确保内容已完全加载• 使用合适的尺寸，避免截图过小或过大
• 复杂页面可以先执行JavaScript清理无关元素
• 保存截图时添加时间戳，便于管理
注意事项：
• Canvas渲染需要图形界面环境，无头环境可能受限
• 截图可能包含敏感信息，注意隐私保护
• 外部资源（图片、CSS）需要可访问
• 复杂的JavaScript执行可能需要等待时间
• Canvas渲染需要图形界面环境，无头环境可能受限
• 截图可能包含敏感信息，注意隐私保护
• 外部资源（图片、CSS）需要可访问
• 复杂的JavaScript执行可能需要等待时间