Canvas技能使用说明

2026-04-01 新闻来源：网淘吧围观:13

电脑广告

手机广告

画布技能

在已连接的OpenClaw节点上显示HTML内容（Mac应用、iOS、Android）。

概述

画布工具允许您在任意已连接节点的画布视图中呈现网页内容。非常适用于：

Canvas

展示游戏、可视化效果、仪表盘
显示生成的HTML内容
交互式演示

工作原理

架构

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │
│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │
│  Port 18793     │     │  Port 18790      │     │  Android)   │
└─────────────────┘     └──────────────────┘     └─────────────┘

画布主机服务器：从canvasHost.root目录提供静态HTML/CSS/JS文件
节点桥接：将画布URL传递给已连接的节点
节点应用：在WebView中渲染内容

Tailscale集成

画布主机服务器基于gateway.bind设置进行绑定：

绑定模式	服务器绑定到	画布URL使用
`环回地址`	127.0.0.1	本地主机（仅限本地）
`局域网`	局域网接口	局域网IP地址
`尾网`	Tailscale接口	Tailscale主机名
`自动`	最佳可用	Tailscale > 局域网 > 环回地址

关键洞察：该画布主机桥接主机源自桥接主机。当绑定到Tailscale时，节点接收到的URL类似：

http://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html

这就是为什么本地主机URL不起作用——节点从桥接接收到的是Tailscale主机名！

操作

操作	描述
`呈现`	显示画布（可选目标URL）
`隐藏`	隐藏画布
`导航`	导航至新URL
`执行`	在画布中执行JavaScript
`截图`	捕获画布截图

配置

位于~/.openclaw/openclaw.json：

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "/Users/you/clawd/canvas",
    "liveReload": true
  },
  "gateway": {
    "bind": "auto"
  }
}

实时重载

当liveReload: true（默认）时，画布主机：

监控根目录的变化（通过chokidar）
将WebSocket客户端注入HTML文件
文件变化时自动重载连接的画布

非常适合开发！

工作流程

1. 创建HTML内容

将文件放在画布根目录（默认为~/clawd/canvas/）：

cat > ~/clawd/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
  <h1>Hello Canvas!</h1>
</body>
</html>
HTML

2. 找到您的画布主机URL

检查您的网关是如何绑定的：

cat ~/.openclaw/openclaw.json | jq '.gateway.bind'

然后构建URL：

回环地址：http://127.0.0.1:18793/__openclaw__/canvas/<文件>.html
局域网/Tailscale网络/自动：http://<主机名>:18793/__openclaw__/canvas/<文件>.html

找到您的Tailscale主机名：

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'

3. 查找已连接的节点

openclaw nodes list

寻找具有画布功能的Mac/iOS/Android节点。

4. 呈现内容

canvas action:present node:<node-id> target:<full-url>

示例：

canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/snake.html

5. 导航、截图或隐藏

canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>

调试

白屏/内容未加载

原因：服务器绑定与节点期望的URL不匹配。

调试步骤：

检查服务器绑定：cat ~/.openclaw/openclaw.json | jq '.gateway.bind'
检查画布所在端口：lsof -i :18793
直接测试URL：curl http://<主机名>:18793/__openclaw__/canvas/<文件>.html

解决方案：使用与绑定模式匹配的完整主机名，而非localhost。

“需要节点”错误

请始终指定node:<节点ID>参数。

“节点未连接”错误

节点处于离线状态。请使用openclaw nodes list查找在线节点。

内容未更新

若实时重载未生效：

请检查配置中liveReload: true的设置
并确保文件位于画布根目录下
检查日志中的监视器错误

URL路径结构

画布主机从/__openclaw__/canvas/前缀提供服务：

http://<host>:18793/__openclaw__/canvas/index.html  → ~/clawd/canvas/index.html
http://<host>:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html

该/__openclaw__/canvas/前缀由CANVAS_HOST_PATH常量定义。

提示

为获得最佳效果，请保持HTML自包含（内联CSS/JS）
使用默认的index.html作为测试页面（包含桥接诊断功能）
画布将持续存在，直到您隐藏它或导航离开
实时重载让开发更快捷——只需保存即可更新！
A2UI JSON推送功能正在开发中——目前请使用HTML文件

免责申明

部分文章来自各大搜索引擎，如有侵权，请与我联系删除。

打赏

文章底部电脑广告

手机广告位-内容正文底部

标签

上一篇：Addis Assistant技能使用说明下一篇：Alexandrie技能使用说明