HTML5 canvas燃尽图

先说说这个demo的灵感来源。

我以前有一同事，技术在我心目中算是非常厉害的那种，我这一年多来的技术提高基本上完全靠他所赐，再次对他表示深深的感谢啊！

一次偶然的机会，让我见识了他的前端博客，其中里边有一个demo给我的印象特别深，好像名字叫做”svg burndown”.

顾名思义，他的这个demo是用svg做的，我觉得挺有意思，于是下定决心自己做一个，svg已经被他用过了，再用就没意思了。

剩下的也就只有html5的canvas可以考虑了，虽然自己的canvas功底不算很强，但还是决定大胆尝试一番。

燃尽图是现在团队敏捷开发非常重要的考量工具，对于团队的分工、进度把控、成员协作等方面起到非常重要的作用。

燃尽图主要分为以下几个部分：

1、坐标轴

主要分为x轴和y轴，其中x轴表示时间，y轴表示剩余任务量，y轴为0时表示任务全部完成。

drawCoordinate: function() {            sContext.beginPath();            sContext.moveTo(xSpace, 0);            sContext.lineTo(xSpace, config.height - ySpace);            sContext.lineTo(config.width, config.height - ySpace);            sContext.lineWidth = 3;            sContext.strokeStyle = 'rgba(0,0,0,0.5)';            sContext.stroke();            sContext.closePath();        },        drawScaleX: function() {            sContext.beginPath();            sContext.moveTo(xSpace, config.height);            var len = timeList.length;            sContext.textAlign = 'center';            for(var i = 0; i < len; i++) {                var date = timeList[i];                var show = date[2] +'/'+ (parseInt(date[1])+1);                var x = config.width/(len+1)*i + xSpace;                if(i > 0) {                    sContext.moveTo(x, 0);                    sContext.lineTo(x, config.height - ySpace);                    maxX = [x, config.height - ySpace];                }                scaleX[i] = x;                sContext.fillText(show, x, config.height - 5);            }            sContext.lineWidth = 1;            sContext.strokeStyle = '#eeeeee';            sContext.stroke();            sContext.closePath();        },        drawScaleY: function() {            var num = 0;            var max = config.taskMax;            var step = config.taskStep;            var len = max/step;            var pLen = parseInt(max/step);            len = len === pLen ? pLen+1 : pLen+2;            sContext.beginPath();            sContext.moveTo(xSpace, config.height);            sContext.textAlign = 'right';            sContext.textBaseline = 'middle';            for(var i = 0; i < len; i++) {                var y = config.height - ySpace - config.height/len*i;                if(i > 0) {                    if(i === len - 1) {                        y = ySpace;                        num = config.taskMax;                    }                    sContext.moveTo(config.width, y);                    sContext.lineTo(xSpace, y);                    maxY = [xSpace, y];                }                sContext.fillText(num+'', xSpace, y);                num += step;            }            sContext.strokeStyle = '#eeeeee';            sContext.stroke();            sContext.closePath();        },

2、参考线

参考线是指标准的项目燃尽线路图，当然，在具体项目中，几乎不可能完全按照参考线的路径一直往下走，一般都是在参考线上下徘徊才算正常。

drawRefLine: function() {            sContext.beginPath();            sContext.moveTo(maxY[0], maxY[1]);            sContext.lineTo(maxX[0], maxX[1]);            sContext.lineWidth = 3;            sContext.strokeStyle = 'rgba(255,255,0,0.5)';            sContext.stroke();            sContext.closePath();        },

3、燃尽线路

燃尽图最重要的便是燃尽线路，每当到了一个时间点，就应该更新燃尽图，具体的操作便是添加一个坐标，许多个坐标连成线变成了燃尽线路。当最后一个时间点的任务量剩余不为0时，表示任务没有完成，同志人须努力啊。

drawBurnLine: function(task) {            task && !this.isSameDate(task) && taskList.push(task);            taskList = taskList.sort();            lContext.clearRect(0, 0, config.width, config.height);            lContext.beginPath();            lContext.moveTo(maxY[0], maxY[1]);            for(var i = 0; i < taskList.length; i++) {                var x = taskList[i][0];                var y = taskList[i][1];                for(var j = 0; j < scaleX.length; j++) {                    if(x.join('') === timeList[j].join('')) {                        var xx = scaleX[j];                        var yy = y > 0 ? (1 - y/config.taskMax)*(config.height - ySpace) : config.height - ySpace;                        lContext.lineTo(xx, yy);                        lContext.arc(xx, yy, 3, 0, Math.PI*2, true);                        break;                    }                }            }            lContext.lineWidth = 3;            lContext.strokeStyle = 'rgba(0,0,255,0.5)';            lContext.stroke();            lContext.closePath();        },

以上便是canvas燃尽图的大致实现原理，肯定还有诸多瑕疵，希望看完后能给个评价，自当虚心接受。

demo演示效果地址：http://xiechengxiong.com/221.html

       欢迎光临我的前端博客：http://xiechengxiong.com/