详述用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源码的地址。