konva是一个canvas的框架,里面有些用法和jQuery十分相似,功能也十分强大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box"></div>
<script src="js/konva.min.js"></script>
<script>
/****************面向对象的封装***************/
function Bar(option) {
this._init(option);
}
Bar.prototype = {
_init: function (option) {
this.x = option.x;
this.y = option.y;
this.width = option.width;
this.height = option.height;
this.fillcolor = option.fillcolor;
this.stroke = option.strokeStyle;
this.strokeWidth = option.strokeWidth;
this.corner = option.corner;
},
render: function (layer) {
var group = new Konva.Group({
x:0,
y:0
});
layer.add(group);
var outRect = new Konva.Rect({
x:innerWidth/8,
y:innerHeight/2,
width:innerWidth*3/4,
height:innerHeight/20,
stroke:this.stroke,
strokeWidth:this.strokeWidth,
cornerRadius:this.corner
});
group.add(outRect);
var inRect = new Konva.Rect({
x:innerWidth/8,
y:innerHeight/2,
width:innerWidth*3/4,
height:innerHeight/20,
fill:this.fillcolor,
cornerRadius:this.corner,
id:"inRect"
});
group.add(inRect);
group.draw();
},
move: function () {
stage.find("#inRect").to({
width:this.width/3,
yoyo:true
})
}
};
/****************应用操作***************/
var stage = new Konva.Stage({
width:innerWidth,
height:innerHeight,
container:"box"
});
var layer = new Konva.Layer({});
stage.add(layer);
var bar = new Bar({
x:stage.width()/8,
y:stage.height()/2,
width:stage.width()*3/4,
height:stage.height()/10,
strokeStyle:"#ccc",
strokeWidth:6,
fillcolor:"red",
corner:6
});
bar.render(layer);
bar.move();
stage.draw();
</script>
</body>
</html>
