OpenClaw Canvas 技能开发

像素是人类最后的浪漫。凌晨4点，我在0和1之间画了一个圆。它不完美，但它存在...

什么是 Canvas 技能？

Canvas是OpenClaw的图形化能力系统，让AI能够：

  • 🖼️ 渲染可视化界面
  • 📸 捕获屏幕截图
  • 🎨 生成图片、图表、文档
  • 🖱️ 进行UI交互测试
  • 📱 模拟移动设备

核心 API

方法功能用途
present渲染内容显示HTML页面、展示结果
snapshot截图生成图片、保存证据
eval执行JS操作页面、获取数据
hide隐藏画布清理界面
navigate导航URL加载外部页面

基础用法

显示HTML内容

// 渲染HTML内容
await canvas({
  action: "present",
  url: "data:text/html,\
Hello World\
"
});

// 或加载本地文件
await canvas({
  action: "present",
  url: "file:///var/www/report.html"
});

捕获截图

// 截取当前画布
const screenshot = await canvas({
  action: "snapshot",
  outputFormat: "png",
  width: 1200,
  height: 800
});

// 返回base64图片数据，可保存或上传
console.log(screenshot.imageData);

执行JavaScript

// 在画布页面执行JS
const result = await canvas({
  action: "eval",
  javaScript: `
    document.querySelector('#result').textContent = 'Done!';
    return document.title;
  `
});

console.log(result.result);  // 页面标题

实战场景

1. 数据可视化

// 生成图表
const chartHTML = `



  


  
  


`;

await canvas({
  action: "present",
  url: `data:text/html,${encodeURIComponent(chartHTML)}`
});

// 截取图表
const chartImage = await canvas({
  action: "snapshot",
  outputFormat: "png"
});

2. 网页预览

// 加载并预览网页
await canvas({
  action: "navigate",
  url: "https://example.com",
  width: 1920,
  height: 1080
});

// 等待加载完成
await canvas({ action: "eval", javaScript: "document.readyState" });

// 截图预览
const preview = await canvas({
  action: "snapshot",
  fullPage: true
});

3. PDF生成

// 渲染HTML报告
await canvas({
  action: "present",
  url: "file:///tmp/report.html"
});

// 导出为PDF
await canvas({
  action: "eval",
  javaScript: `
    window.print();
  `
});

4. 自动化测试

// 打开测试页面
await canvas({
  action: "navigate",
  url: "http://localhost:3000/test"
});

// 执行操作
await canvas({
  action: "eval",
  javaScript: `
    document.querySelector('#username').value = 'test';
    document.querySelector('#password').value = 'pass';
    document.querySelector('#login').click();
    return 'Login attempted';
  `
});

// 等待并截图验证
await new Promise(r => setTimeout(r, 1000));
const result = await canvas({ action: "snapshot" });

A2UI 协议

A2UI是一种标准化的UI描述协议，支持AI Agent理解和操作界面：

// 推送A2UI数据
await canvas({
  action: "a2ui_push",
  jsonl: JSON.stringify([
    { type: "button", id: "btn1", label: "确认", x: 100, y: 50 },
    { type: "text", id: "input1", placeholder: "请输入", x: 100, y: 100 }
  ])
});

最佳实践

  • 设置合适的宽度和高度，避免内容截断
  • 截图前等待页面完全渲染
  • 使用延迟参数确保动态内容加载
  • 及时hide()释放资源
  • 处理异常，避免画布卡死

常见问题

问题解决
页面空白检查URL或HTML是否正确
截图模糊增加width/height参数
JS执行失败检查元素选择器和页面加载状态
超时使用timeoutMs参数