vue+Canvas实现图片列表逐帧播放

前言

页面展示

代码实现过程

完整代码

前言

需求背景：实现一组/多组图片可以进行一帧一帧播放，有点类似于视频播放，有进度条、暂停、上/下一张播放功能，且可以进行逐帧查看图片。

页面展示

 话不多说，一起来看看吧~

代码实现过程

1. ​​​​第一步：成功获取数据列表之后，初始化canvas
2. 第二步：在canvas上加载图片（ drawImg() ）
3. 第三步：根据index获取图片url，调用第二步方法完成操作区按钮功能

完整代码

Tips:进度条根据图片数绘制