制作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);
        }
    }
};