详述用html5 canvas实现的类似于天猫的购物进度反馈/订单跟踪

UI设计图如下：

1、前期准备：
canvas基础传送门：http://www.w3school.com.cn/html5/html_5_canvas.asp
注意两个必定会用到的实例：线条和圆

2、函数参数设想
我们来假设，最后有一个函数，名字叫做trace，当我们【trace(XXXXX);】之后，飒的一下，最终的进度反馈图就在页面上渲染出来了。那么这个函数，我应该要给它什么数据作为参数让它去生成最终的结果呢？
大伙们可以根据自己的情况具体分析，我这里给出我的参数：

trace({        "row_number":3,//每行有几个圆        "col_number":4,//每列有几个圆        "total_number":12,//一共有多少个圆        "datainit":[            {"name":"接单","time":"XX-XX-XX XX:XX"},            {"name":"订舱","time":"XX-XX-XX XX:XX"},            {"name":"提箱","time":"XX-XX-XX XX:XX"},            {"name":"进场","time":"XX-XX-XX XX:XX"},            {"name":"申报","time":""},            {"name":"放行","time":""},            {"name":"对单","time":""},            {"name":"签发","time":""},                {"name":"对账","time":""},            {"name":"付款","time":""},            {"name":"开船","time":""},            {"name":"到港","time":""},        ]    });

我的参数就是一个json对象，这个对象中的datainit属性又是一个json数组，友情来一个json基本语法的传送门：http://www.w3school.com.cn/json/json_syntax.asp
这些参数是用来告诉函数反馈图的基本信息——这个反馈图应该长什么样子。。具体的节点有哪些。。。。

3、任务分解和实现
我们可以很自然地认为，假设这个反馈图有x个节点，那么我们就可以通过一个长度为x的循环来渲染出这个反馈图，基于这个前提，我们要找出不同位置上的点和线的组合具有哪些特征、一共有多少种不同的点线组合。
我划分出了五种：
①只有一个点
②竖线+点
③“u”形线+点
④点+竖线
⑤“n”形线+点

现在我们已经将整个进度反馈图做了相应的分隔，接下来的问题实际上是数学上的找规律了：将循环的下标和五个状态关联起来，比如说，当下标index=1时，我们就用①来进行渲染，当index=2时，就用②来进行渲染（每次循环要根据情况更新一下坐标值）。

function getStatus(index,col_number){    if(index==1)        return 1;    else    {        if(!chk(index/col_number+1))        {            if(index%col_number==0)                status=4;            else{                if(index%col_number==1)                    status=5;                else                    status=2;            }        }        else        {            if(index%col_number==0)                status=2;            else                {                if(index%col_number==1)                    status=3;                else                    status=4;            }        }        return status;    }}

接下来，就是根据不同的状态值status来对画布进行对应的渲染，以下是status为1时的代码段：

for(var index=1;index<=data.total_number;++index){            var status=getStatus(index,data.col_number);            if(status==1){                var name=data.datainit[index-1].name;                var time=data.datainit[index-1].time;                if(time=="")//如果是未完成的流程，那么文字的颜色为灰色                {                    context.fillStyle="rgb(200,200,200)";                }                context.beginPath();                context.arc(x,y,10,0,Math.PI*2,true);                context.closePath();                context.fill();                context.font = "15px 微软雅黑";                context.textBaseline = 'top';                context.fillText(name, x+15, y-10);                context.font = "10px 微软雅黑";                context.textBaseline = 'top';                context.fillText(time, x+15, y+10);            }        }

大致的思路如上所述，之后我会放上github源码的地址。