用canvas播放scratch文件

基于Github上的scratch-render实现sb2或者sb3文件可以用h5的canvas直接播放而不是flash

前言

关于scratch-render，scratch-gui，scratch-vm等组件的关系可以查看这篇教程Getting Started，然后发现与Scratch文件相关的播放部分是由scratch-render控制。

Scratch 3.0

安装

git clone https://github.com/LLK/scratch-render.git
cd scratch-render
npm install # 使用cnpm可能会安装失败

下载龟速的话可以科学上网然后使用Proxifier全局代理

使用

其实Scratch开发团队已经实现了这个功能，只是我们要找到接口来调用。打开目录下的/test/integration/index.html可以打开这个播放器Demo网页。此时上传sb文件会发现只能显示代码初始状态的效果，这时需要添加一行代码，添加vm.greenflag()给js执行，就可以实现播放的效果了。
这个网页的代码如下：

现在打开之后随便扔一个sb文件进去就会自动播放了

scratch播放器

然后你就可以根据这个网页的逻辑进行改编，进一步定制实现自己的播放器界面了，比如像网易卡达这样子

网易卡达播放页面

后记

为什么写篇博文呢，因为当初找不到文档和教程啊，卡了老子好久有没有，结果发现加上这句话就好了，自己就像个sb一样。另外scratch3.0在写这篇博文的时候还没有正式发布，之后的版本具体可能与现在不一致，请读者自行分辨尝试。