LeaferJS × Cloud Studio：好用的 Playground 环境，轻松运行代码与小游戏

用户的声音

“有没有一个在线的 Playground 环境，可以直接运行官网示例代码，分享代码片段和案例？”

一个阳光灿烂的上午，我像往常一样在电脑前为 LeaferJS 忙碌着。随着这个开源项目的不断壮大，用户群体也在逐渐增多。

这天，用户群里突然热闹了起来。几位开发者正在讨论：“有没有一个在线的 Playground 环境，可以直接运行官网示例代码，分享代码片段和案例？”这句话迅速引起了其他人的共鸣。

我停下手中的工作，望着屏幕。其实，我早就意识到用户对这样一个平台的渴望，但手头繁忙的任务让我一时无暇顾及。

意外的合作机会

就在我思考如何解决这个需求时，一条私信跳了出来。是腾讯 Cloud Studio 的产品负责人甘米。

“最近看你们用户群里讨论得挺热闹。”甘米的开场白很直接。

他接着说：“这个 Playground 环境可以尝试用 Cloud Studio 搭建，我们可以提供技术支持。”

当时我并没有太在意，懒懒地回复了一句：“好嘞，我有时间了解一下。”

其实我心里在想：“最好还是我们自己开发一个 Playground 环境吧，正好也有用户想参与开发。”

解决方案的探索

不久之后，又有用户问起 Playground 环境。带着好奇心，我决定去了解一下 Cloud Studio。

在 Megan Zhang 老师的帮助下，我很快搭建了一个可以在线运行的 Playground 环境。

这不正是用户需要的效果吗？修改代码，点击运行，就能看到变化，还能轻松分享代码给别人查看效果。

于是我改变了想法。与其自己煞费苦心地开发一个 Playground 环境，不如直接使用 Cloud Studio，把更多的时间用在开发 LeaferJS 的核心功能上。

功能完善与上线

虽然 Cloud Studio 并非专门为 Playground 环境设计，但它提供了强大的功能支持。为了让这个环境变得更好用，我提出了一个需求：“能否通过一个链接，直接帮助用户创建基于 LeaferJS 的 Playground 环境？”

Cloud Studio 团队迅速行动，他们将 LeaferJS 集成到了开源库模板中，并且支持通过链接直接选中 LeaferJS 模板。为防止链接被恶意使用，用户仍需手动点击一下创建按钮。我觉得只要步骤清晰，这也是能接受的。

使用步骤

现在，任何人都可以通过简单的几步操作，创建属于自己的 LeaferJS Playground 环境，感兴趣的同学不妨试试看！

通过网站首页的入门场景进入

根据提示步骤进入创建页面

进入 Playground 环境

分享你的代码

过去，许多 LeaferJS 用户在完成一个示例后，需要自己搭建环境，才能将成果展示给他人。现在，通过 Cloud Studio，你可以直接从 GitHub 仓库导入项目，轻松创建应用并分享链接。

随着 LeaferJS 用户群体的不断扩大，官网的示例代码已经难以满足所有人的需求。越来越多的新用户希望从更多实际场景的代码片段和案例中学习，我们需要更多的代码片段和场景案例。

希望你能通过我们的用户交流群分享代码片段或作品，我们会统一放到官网，与更多开发者一起互相学习，共同成长。

透露一下，目前小游戏和图形编辑器的案例最受欢迎。并且我们正在积极完善精灵、动画、滤镜等功能，以更好地满足开发者的需求。

了解 LeaferJS 与 Cloud Studio

LeaferJS 是一款好用的 Canvas 渲染引擎，免费开源，可用于高效绘图、UI 交互（含小游戏）、图形图像编辑，并支持自动布局。

官网： https://www.leaferjs.com

Cloud Studio 是一个致力于在线编程与应用分享的平台，提供强大的 Web IDE 和云端开发环境，让你轻松编写、分享和运行应用。

官网： https://cloudstudio.net