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