流程图动画效果html,基于JS实现带动画效果的流程进度条

当在使用流程的时候，比如有一个审核流程，有三个阶段：开始，审核中，审核成功。当在不同的阶段，做相应的进度显示，当显示时，是以动画的形式显示的。话不多说，我们开始打造吧。

首先，我考虑的是使用canvas来打造这个控件，于是我现在demo.html里新建了一个canvas用来显示测试用，并且先预计了几个属性值，在做的过程中增增改改，最终属性如下：

data-r="15" dara-progress="3" data-speed="20" data-fill-colour="#ffff00" data-padding="10">

您的浏览器不支持 HTML5 canvas 标签。

然后开始编写相应的js文件，我将其命名为ct_progress.js。我的目的是打造一款使用者可以自由配置的显示控件，于是定义了一下可配置的属性：

var c=document.getElementById("myCanvas");

var showStr = c.getAttribute("data-show");

var showStrs = showStr.split("|");

var r = c.hasAttribute("data-r")?Number(c.getAttribute("data-r")):15;

var ctx=c.getContext("2d");

var padding = c.has