Canvas Skill¶
Skill 简介¶
OpenClaw Canvas 是一个强大的工具，它允许开发者将 HTML 内容展示在任何连接的设备节点上，包括 Mac 应用、iOS 和 Android 设备。Canvas Skill 的核心目标是为开发者提供一个便捷的渠道，将动态生成的网页内容、游戏、可视化仪表盘等展示在各种终端设备上。通过这种方式，开发者可以轻松实现跨平台的展示和交互功能，而无需为每个平台单独编写复杂的渲染逻辑。
Canvas Skill 的设计初衷是为了解决跨平台内容展示的难题。在传统开发流程中，开发者需要针对不同操作系统和设备编写不同的渲染代码，这不仅增加了开发成本，还可能导致展示效果不一致。Canvas Skill 通过统一的 HTML/CSS/JavaScript 渲染方式，简化了这一过程，使得开发者能够专注于内容本身的创作，而不必担心不同平台的兼容性问题。
主要功能¶
1. 跨平台内容展示¶
Canvas Skill 支持在 Mac、iOS 和 Android 等不同平台上展示 HTML 内容。开发者只需编写一次 HTML/CSS/JavaScript 代码，就可以在所有支持的设备上实现一致的展示效果。这不仅提高了开发效率，还保证了用户体验的一致性。
2. 动态内容渲染¶
Canvas Skill 能够渲染动态生成的 HTML 内容。这对于需要实时更新数据的应用场景（如游戏、仪表盘、实时监控系统等）非常有用。开发者可以通过 WebSocket 或其他实时通信技术，将动态数据注入到 HTML 模板中，实现实时更新。
3. 交互式演示¶
Canvas Skill 支持交互式演示功能，开发者可以在 Canvas 上嵌入交互式元素，如按钮、表单、动画等。这使得 Canvas 不仅是一个静态的展示工具，更是一个强大的交互式应用平台。
4. 截图功能¶
Canvas Skill 提供了截图功能，开发者可以通过简单的命令捕获当前 Canvas 的屏幕截图。这对于调试、报告生成或内容存档非常有用。
5. 实时重载¶
Canvas Skill 支持实时重载功能，当开发者修改 HTML/CSS/JavaScript 文件时，Canvas 会自动检测到变化并重新加载内容。这大大简化了开发过程中的调试和迭代工作。
6. Tailscale 集成¶
Canvas Skill 与 Tailscale 深度集成，支持通过 Tailscale 网络进行远程访问。开发者可以轻松地在不同网络环境下访问和展示 Canvas 内容，而无需担心防火墙或 NAT 穿透问题。
使用场景¶
1. 游戏展示¶
开发者可以使用 Canvas Skill 在各种设备上展示 HTML5 游戏。通过 Canvas 的跨平台特性，开发者可以快速将游戏部署到 Mac、iOS 和 Android 等不同平台上，而无需为每个平台单独编写渲染代码。
2. 可视化仪表盘¶
Canvas Skill 非常适合用于展示实时数据可视化仪表盘。开发者可以将数据可视化库（如 D3.js、ECharts 等）与 Canvas 结合使用，实现动态更新的数据展示。
3. 实时监控系统¶
在工业控制、IoT 等领域，Canvas Skill 可以用于构建实时监控系统。通过 Canvas 的实时渲染和更新功能，开发者可以实时展示设备状态、数据流等信息。
4. 交互式演示¶
Canvas Skill 支持交互式演示，开发者可以创建包含按钮、表单、动画等交互元素的演示文稿。这对于产品展示、培训、教育等领域非常有用。
5. 远程调试¶
通过 Tailscale 集成，开发者可以远程访问和调试 Canvas 内容。这对于分布式团队或远程办公场景非常有用。
如何使用¶
1. 安装与配置¶
首先，确保你已经安装了 OpenClaw 工具。然后，在终端中运行以下命令来配置 Canvas Host：
# 打开配置文件
nano ~/.openclaw/openclaw.json
# 添加或修改以下配置
{
"canvasHost": {
"enabled": true,
"port": 18793,
"root": "/Users/your-username/clawd/canvas",
"liveReload": true
},
"gateway": {
"bind": "auto"
}
}
2. 创建 HTML 内容¶
将你的 HTML 文件放置在配置文件中指定的 root 目录下。例如：
cat > ~/clawd/canvas/index.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>测试页面</title></head>
<body>
<h1>欢迎使用 Canvas Skill!</h1>
</body>
</html>
HTML
3. 启动 Canvas Host¶
启动 Canvas Host：
openclaw canvas host start
4. 查找节点¶
查找连接的节点：
openclaw nodes list
5. 展示内容¶
使用以下命令将内容展示到指定节点：
canvas action:present node:<node-id> target:http://<hostname>:18793/__openclaw__/canvas/index.html
例如：
canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/index.html
示例¶
示例 1: 展示本地 HTML 文件¶
假设你有一个 HTML 文件 ~/clawd/canvas/my-game.html，你想将其展示到某个节点上。首先，确保 Canvas Host 正在运行：
openclaw canvas host start
然后，使用以下命令展示内容：
canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/my-game.html
示例 2: 实时更新内容¶
假设你在开发一个实时更新的仪表盘。首先，创建 HTML 文件：
cat > ~/clawd/canvas/dashboard.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>实时仪表盘</title></head>
<body>
<h1>实时数据</h1>
<div id="data">加载中...</div>
<script>
// 模拟实时数据更新
setInterval(() => {
document.getElementById('data').innerText = '当前时间: ' + new Date().toLocaleTimeString();
}, 1000);
</script>
</body>
</html>
HTML
然后，展示内容：
canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/dashboard.html
由于启用了实时重载功能，当你在编辑器中保存 dashboard.html 时，Canvas 会自动重新加载内容，实时更新显示的数据。
总结¶
OpenClaw Canvas Skill 是一个功能强大且易于使用的工具，专为跨平台内容展示和实时交互而设计。它通过统一的 HTML/CSS/JavaScript 渲染方式，简化了多平台开发流程，使得开发者能够快速将内容部署到各种设备上。无论是游戏展示、可视化仪表盘、实时监控系统，还是交互式演示，Canvas Skill 都能提供可靠的支持。对于需要频繁调试和迭代的开发者来说，Canvas Skill 的实时重载功能更是一个不可或缺的利器。总的来说，Canvas Skill 非常适合那些需要在不同平台上展示动态内容的开发者群体。