1.html代码：

1  2  3  4     
      5     
      6      7     15     16     17 18 19 
     
      20 
     
21 50 51 

2.js代码：

1 function ProgressBar( option ) { 2     //new 构造函数执行的时候，调用 内部的初始化方法。 3     this._init( option ); 4 } 5  6 ProgressBar.prototype = { 7     //类初始化的时候：创建内部矩形，　外部矩形，然后把两个矩放到goroup里面去。 8     _init: function( option ) { 9         this.x = option.x || 0;    //进度条的x坐标10         this.y = option.y || 0; // 进度条的y坐标11         this.w = option.w || 0; //进度条的宽度12         this.h = option.h || 0; //进度条的高度13 14         this.fillStyle = option.fillStyle || 'red';15         this.strokeStyle = option.strokeStyle || 'red';16 17         //定义的内部的进度条的矩形18         var innerRect = new Konva.Rect({19             x: this.x,                 // stage.width(),获得舞台的宽度，  x：设置当前矩形x坐标20             y: this.y,21             width: 0,                 //设置矩形的宽度22             height: this.h,         //设置矩形的高度23             fill: this.fillStyle,    //设置矩形的填充的颜色24             cornerRadius: 1/2 * this.h, //设置进度条的圆角。25             id: 'innerRect',        //设置当前矩形的ID，以便于后面进行使用ID选择器26             name: 'ss'                //设置name,方便后面用类选择器。27         });28 29         this.innerRect = innerRect;30 31         //添加一个外边框的 矩形32         var outerRect = new Konva.Rect({33             x: this.x,                 // stage.width(),获得舞台的宽度，  x：设置当前矩形x坐标34             y: this.y,35             width: this.w,             //设置矩形的宽度36             height: this.h,         //设置矩形的高度形的高度37             stroke: this.strokeStyle, // 设置了stroke那么，矩形就进行描边38             strokeWidth: 4,             // 设置边框的宽度，39             cornerRadius: 1/2* this.h,40         });41 42         //html : 43         // 创建一个组， 相当于html中的父盒子。把其他两个盒子包在里面；当给其设置坐标时，相当于进行绝对定位，这时候的子盒子是跟着父盒子进行定位的；44         this.group  = new Konva.Group({45             x: 0,46             y: 047         });48         this.group.add( innerRect );//把内部的矩形放到组中49         this.group.add( outerRect );50     },51     //此方法是将 用户传进来的需要改变的进度 运行动画52     changeValue: function( val ) {53         //传进来的进度54         if( val > 1 ) { //   1 - 100   vs   0 -1     =>0.555             val = val /100;56         }57         //做动画 val = .3 .758         var width = this.w * val; //最终进度条内部矩形的 宽度。59 60         // 通过id选择器去查找内部的子元素。61         var innerRect = this.group.findOne('#innerRect');62         // var innerRect = this.group.findOne('Rect');63 64         var innerRect = this.innerRect;65         66         // to动画系统： 让我们的物件 变换到某个状态67         // 让我们的 物件从 当前状态 到  下面设置的状态，68         innerRect.to({69             width: width,70             duration: .3,71             easing: Konva.Easings.EasIn72         });73 74     },75     // arg： 传进来的层或者 是组，76     //此方法是：把当前创建的进度条　添加到　层中。77     addToGroupOrLayer: function( layer ) {78         layer.add( this.group );79     }80 }