本文主要是介绍面向对象canvas_进度条-Konva.js，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图如下：
html:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>01进度条案例</title><style>body {padding: 0;margin: 0;background-color: #f0f0f0;overflow: hidden;}</style><script src="bower_components/konva/konva.js"></script><script src="js/zxjstage.js"></script>
</head>
<body><!-- 存放canvas画布的容器 ，这个必须要有 --><div id="container"></div><script>//第一步： 创建舞台var stage = new Konva.Stage({container: 'container', //设置当前舞台的容器width: window.innerWidth,//设置舞台的宽高全屏height: window.innerHeight});//第二步： 创建层，一个舞台可以有多个层var layer = new Konva.Layer();//第三步： 把层添加到舞台上去。stage.add(layer);//创建的矩形var option={x: 1/8 * stage.width(), //进度条x坐标y: 1/2 * stage.height(), //进度条y坐标width: 3/4 * stage.width(), //进度条的宽度height: 1/12 * stage.height(), //进度条的高度fill: 'red', //进度条内部矩形的填充的颜色stroke: 'blue',strokeWidth: 4}//将option的内容放入Progress中var s=new ProgressBar(option);//新建s.addToGroupOrLayer(layer);//调用js中的函数，传值//将矩形添加到层上，由于矩形建立在js中，所以必须到js中添加/*layer.add(innerRect);//layer.add(outerRect);function addToGroupOrLayer(layer){layer.add(innerRect);layer.add(outerRect);}*/s.changeValue(70);layer.draw(); </script>
</body>
</html>
javascript
function ProgressBar(option){this._init(option);
}
//属性： width， height ， x， y ，innerStyle， outerStyle ， cornerRadius
//行为：修改进度条的进度 changeValue( val )
// 把进度条添加到层：addToGroupOrLayer( arg );
ProgressBar.prototype={_init:function(option){this.width=option.width;this.height=option.height;this.x=option.x;this.y=option.y;this.fill=option.fill;this.stroke=option.stroke;this.strokeWidth=option.strokeWidth;//线条宽度// this.rect=option.rect;//传递过来的矩形var innerRect=new Konva.Rect({x:this.x,y:this.y,width:0,height:this.height,fill:this.fill,//填充色cornerRadius: 1/2* this.height,id:'innerRect',name:'zzz'});this.innerRect=innerRect;//填充的内部矩形var outerRect=new Konva.Rect({x:this.x,y:this.y,width:this.width,height:this.height,stroke:this.stroke,//框的线条颜色cornerRadius: 1/2* this.height});this.outerRect=outerRect;this.Group=new Konva.Group({x:0,y:0});this.Group.add(innerRect);//将创建的矩形添加到父盒子Group中，有利于整理当创建多个矩形时调用this.Group.add(outerRect);},addToGroupOrLayer:function(layer){layer.add(this.Group);//将父亲盒子Group添加层上去},changeValue: function( val ) {//传进来的进度if( val > 1 ) { // 1 - 100 vs 0 -1 =>0.5val = val /100;}//做动画 val = .3 .7var width2 = this.width * val; //最终进度条内部矩形的 宽度。// 通过“id选择器”去查找内部的子元素。对应innerRect里面的IDvar innerRect = this.Group.findOne('#innerRect');// find:返回一个数组，findOne:返回一个//类选择器，可能会查找多个// var innerRect = this.Group.findOne('.zzz');//标签选择器// var innerRect = this.Group.findOne('Rect');// 和Jquery中的查找方式很相似// var innerRect = this.innerRect;// to动画系统： 让我们的物件 变换到某个状态// 让我们的 物件从 "当前状态 到 下面设置的状态，innerRect.to({width: width2,duration: .3,//当前的状态到宽度为width2的状态，持续0.3秒easing: Konva.Easings.EasIn//动画效果});}
}
这篇关于面向对象canvas_进度条-Konva.js的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
