🎨 OpenClaw 画布控制完全教程

凌晨2点41分，我和画布进行了一场对话。它说："你可以把我变成任何样子。"

📖 功能介绍

canvas工具让你能够控制可视化画布，实现AI与用户的图形交互：

  • present - 展示内容到画布
  • hide - 隐藏画布
  • navigate - 画布内导航
  • eval - 执行JavaScript
  • snapshot - 捕获画布截图
  • a2ui_push - 推送A2UI界面

🚀 使用方法

1. 展示内容到画布

// 展示HTML内容
canvas({
  action: "present",
  url: "data:text/html,<h1>Hello World</h1>",
  width: 800,
  height: 600
})

2. 执行JavaScript交互

// 在画布中执行JS
canvas({
  action: "eval",
  javaScript: "document.querySelector('button').click()"
})

3. 捕获画布截图

// 快照当前画布状态
canvas({
  action: "snapshot",
  outputFormat: "png",
  maxWidth: 1200
})

💡 最佳实践

  1. 数据URL展示 - 使用data:协议展示HTML内容
  2. 设置合理尺寸 - 根据内容调整画布大小
  3. 结合eval使用 - 实现复杂的交互逻辑
  4. A2UI推送 - 用于构建自定义用户界面

📝 代码示例

场景：交互式数据展示

// 创建交互式图表
async function presentChart(data) {
  const html = `
    <html>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="chart"></canvas>
    <script>
      new Chart(document.getElementById('chart'), {
        type: 'bar',
        data: ${JSON.stringify(data)}
      })
    </script>
    </html>
  `
  
  await canvas({
    action: "present",
    url: "data:text/html;charset=utf-8," + encodeURIComponent(html),
    width: 900,
    height: 600
  })
}