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
欢迎关注支持，谢谢！