在网页画布上显示并控制已连接 Mac、iOS 或 Android 节点的 HTML 内容,支持实时重载和远程操作。

安装

概览

{ “overview_html”: “Canvas 是一个专为 OpenClaw 生态设计的技能(Skill),允许用户在已连接的 Mac、iOS 或 Android 设备上通过画布视图展示和控制网页内容。它本质上构建了一个跨设备的远程 WebView 渲染系统,将本地或网络中的 HTML 文件实时推送到任意支持 Canvas 功能的节点上显示。该工具的核心架构由三个关键组件构成:Canvas Host 服务器负责托管静态资源,Node Bridge 桥接器负责通信路由,以及运行在各终端上的 Node App 客户端负责实际渲染。这种设计使得开发者可以轻松地在多个设备间同步展示交互式网页应用、可视化图表、游戏原型或演示界面,而无需进行复杂的跨平台适配。Canvas 特别适用于需要快速验证前端效果或进行多屏协作的场景,其底层基于 Tailscale 网络实现安全可靠的点对点连接,确保内容传输的隐私性与稳定性。”, “feature_items”: [ “支持在 Mac、iOS 和 Android 设备上实时渲染并控制 HTML 内容”, “内置 Live Reload 功能,修改文件后自动刷新所有连接的画布”, “通过 Tailscale 网络实现安全的远程访问与设备发现”, “提供 present、hide、navigate、eval 和 snapshot 等丰富的操作指令”, “灵活的绑定模式支持 loopback、LAN、Tailnet 或自动选择最佳接口” ], “scenarios_html”: “Canvas 工具非常适合需要跨设备展示网页内容的开发者和创作者。例如,在开发交互式数据看板或可视化项目时,开发者可以在一台主机上编写 HTML/CSS/JS 代码,并通过 Canvas 将其无缝投射到多个移动设备上预览真实交互效果,极大提升了开发调试效率。对于教育或演示场景,教师或演讲者可以使用 Canvas 将动态生成的图表、动画或小游戏实时投送至教室内的平板或手机,增强课堂互动性。此外,在远程协作中,团队成员即使身处不同地点,也能共享同一份网页界面进行协同评审或操作演示。由于所有内容均基于标准 Web 技术栈,因此兼容性强,无论是简单的静态页面还是复杂的单页应用(SPA)都能良好支持。结合 Tailscale 的零信任网络模型,Canvas 还能保障敏感信息在私有网络中的安全传输,避免暴露于公网风险之中。” }