Konva快速入门

konva简单理解

1、 当我们刚接触到canvas时，我们期待如何去画出如游戏中的图画，而konva便是让我们更加便捷画图的库，如同JS有jQuery,首先我们要了解图画的构造

把整个视图看做一个舞台stage
而舞台中的每一层，看做layer
layer层中有许多group组
在group中绘制画图、图片等

2、创建一个简单的进度条

a).导入konva.js文件
b).创建舞台（在konva中，所有的操作都是面向对象的）

var stage = new Konva.Stage({
        container : 'demo',    //container 用来容纳舞台的容器
        width : window.innerWidth,
        height : window.innerHeight     
})

container容器中创建了一个konvajs-content，用于后续容纳图形内容
c). 创建层

var layer = new Konva.Layer();  //创建一个层
stage.add(layer);               //把层添加到舞台
var layer2 = new Konva.Layer({});  //创建第二个层
stage.add(layer2);

d).创建两个矩形

//绘制外部矩形
var outRect = new Konva.Rect({
    x:100,      //矩形相对父容器的坐标
    y:100,      
    width: 500,   //矩形的宽高
    height:50,
    strokeWidth:10,    //描边的宽度
    stroke:'#aaa',     //描边的颜色
    cornerRadius: 25      //圆角
});
layer.add(outRect);    //把绘制的图形添加到图层上
layer.draw();       //切记要绘制图层

//绘制内部矩形
var innerRect = new Konva.Rect({
    x:100,
    y:100,
    width: 500*0.5,      //设置外部矩形的宽度为外部矩形的一半
    height:50,
    fill:'skyblue',      //填充颜色
    cornerRadius: 25
});
layer2.add(innerRect);
layer2.draw();  

此时，你会发现，绘制的图形并没有达到预期的效果，需要注意的是，在添加图层是，后添加的图层会显示在上面，此时，你只需要调整c)步的图层添加顺序，简单的进度条绘制就完成了。

e).使用group,达到同样效果，但其原理并不相同

var group = new Konva.Group({
    x : 0,
    y : 0
});
group.add(innerRect);     //把两个矩形添加到组中
group.add(outRect);
layer.add(group);    //把组添加到层中
layer.draw();

3、动画效果

1. tween对象，可以控制所有数字类型的属性进行动画处理，如:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等
   例如：

var tween = new Konva.Tween({
    node: rect,             //要进行动画的Konva对象
    x: 300,                 //要进行动画的属性
    opacity: 0.8,            
    duration: 1,            //持续时间
    easing: Konva.Easings.EaseIn, //动画的动画效果
    yoyo: true,             //是否进行循环播放的设置
    onFinish: function() {
        //动画执行结束后，执行此方法
    }
});
tween.play();   //启动动画

1. 对tween封装的to

  rect.to({
        x: 100,
        y: 100,
        opactity: .1,
        duration: 3,
        onFinish: function() {

        }
    }); 

还有很多好玩的DEMOS请参考Konva官方文档： https://konvajs.github.io/docs/sandbox/

作者：kuke_kuke
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！