制作TimeLine物流信息展示效果

 var TimeLine = function (_id) {
     this.id = _id;
     this._top = 40;
     this.vHeight = 40;
     this.global_top = 40;
     this.line_height = 4;
     this.radius = 6;
     this.startPosition = 6;
     this.text_top = 40;
     this.text_margin = 20;
     this.text_left = [6, 15];
     this.canvas = null;
     this.totalWidth = 0;
     this.totalHeight = 0;
     this.context = null;
     this.stepPosition = 100;
     this.font = "bold 35px sans-serif";
     this.Init();
 };

 TimeLine.prototype = {
     Init: function () {
         this.canvas = document.getElementById(this.id);
         if (this.canvas == null) {
             return false;
         }

         this.totalWidth = this.canvas.clientWidth * 0.95;
         this.totalHeight = this.canvas.clientHeight;
         this.stepPosition = 0.1 * this.totalWidth;
         this.global_top = 0.1 * this.totalHeight;
         this.vHeight = 0.1 * this.totalHeight;
         this.text_margin = 0.06 * this.totalHeight;
         this.radius = 0.01 * this.totalHeight;
         this.text_left = [0.01 * this.totalHeight, 0.01 * this.totalWidth];
         this.startPosition = 0.02 * this.totalWidth;

         this.context = this.canvas.getContext("2d");
         //每次重绘前清空
         this.context.clearRect(0, 0, this.totalWidth, this.totalHeight);
     },

     /**
     *strDate:时间
     *strContent：显示文本
     *direction：走势，0水平，1垂直，-1结束
     *status：状态，1，2已完成，0未完成
     */
     AddEvent: function (strDate, strContent, direction, status) {
         if (this.canvas == null) {
             return false;
         }
         var okColor = 'green', onColor = 'gray';
         var passColor = "rgba(0,255,0,0.5)", waitColor = "rgba(99,99,99,0.5)";
         var passStrokeColor = "green", waitStrokeColor = "rgba(99,99,99,0.5)";
         if (direction == 0) {
             this.stepPosition = strContent.length * 6;
             if (this.stepPosition < 0.20 * this.totalWidth) this.stepPosition = 0.20 * this.totalWidth;
             //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
             this.context.fillStyle = ((status == 1 || status == 2) ? passColor : waitColor);
             this.context.fillRect(this.startPosition + this.radius, this.global_top, this.stepPosition, this.line_height);

             //设置新图形（红色圆形）
             this.context.beginPath();
             this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
             this.context.arc(this.startPosition + this.line_height / 2, this.global_top + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
             this.context.fill();
             this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
             this.context.font = this.font;
             //this.text_top=this.global_top+this.line_height+this.text_margin;
             this.text_top = this.text_margin;
             //context.strokeStyle = ((status==1||status==2)?passStrokeColor:waitStrokeColor);
             //context.strokeText(strContent,this.startPosition+text_left[0],this.text_top);
             this.context.fillText(strContent, this.startPosition + this.text_left[0], this.text_top);
             this.context.fillText(strDate, this.startPosition + this.text_left[0], this.global_top + this.text_top + 10);
             this.startPosition += this.stepPosition;
         }
         else if (direction == 1) {
             stepPosition = 50;
             //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
             this.context.fillStyle = ((status == 1) ? passColor : waitColor);
             this.context.fillRect(this.startPosition, this.vHeight + this.radius + this.line_height / 2, this.line_height, this.stepPosition * 0.2);
             this.vHeight += this.stepPosition * 0.2;
             this._top += +this.stepPosition * 0.2;
             //设置新图形（红色圆形）
             this.context.beginPath();
             this.context.fillStyle = ((status == 1) ? okColor : onColor);
             this.context.arc(this.startPosition + this.line_height / 2, this.vHeight + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
             this.context.fill();
             this.context.fillStyle = ((status == 1) ? okColor : onColor);
             this.context.font = this.font;
             this.text_top = this._top + this.line_height / 2;
             //this.context.strokeStyle = ((status==1)?passStrokeColor:waitStrokeColor);
             //this.context.strokeText(strDate+'    '+strContent,this.startPosition+text_left[1],this.text_top);
             this.context.fillText(strDate + '    ' + strContent, this.startPosition + this.text_left[1], this.vHeight + 10);
             //this.context.fillText(strContent,this.startPosition+this.text_left[1],this.text_top+this.text_margin);
         }
         else if (direction == -1) {
             //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
             this.context.fillStyle = ((status == 1 || status == 2) ? passColor : waitColor);
             this.context.fillRect(this.startPosition + this.radius, this.global_top, this.stepPosition * 0.7, this.line_height);
             //设置新图形（红色圆形）
             this.context.beginPath();
             this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
             this.context.arc(this.startPosition + this.line_height / 2 + this.stepPosition * 0.7 + this.radius, this.global_top + this.line_height / 2, this.radius, 0, Math.PI * 2, false);
             this.context.fill();
             this.context.fillStyle = ((status == 1 || status == 2) ? okColor : onColor);
             this.context.font = this.font;
             this.text_top = this.text_margin;
             //context.strokeStyle = ((status==1||status==2)?passStrokeColor:waitStrokeColor);
             //context.strokeText(strContent,this.startPosition+this.text_left[0]+this.stepPosition*2.5,this.text_top);
             this.context.fillText(strContent, this.startPosition + this.text_left[0] + this.stepPosition * 0.4, this.text_top);
             this.context.fillText(strDate, this.startPosition + this.text_left[0] + this.stepPosition * 0.4, this.global_top + this.text_margin + 10);
         }
     }
 };