目录
一、Konva 基本概念
二、Konva 的使用
1. 引入 Konva
2. Konva 基本绘制步骤
三、Konva 动画
1. tween 对象
2. 动画 to 方法的使用
3. 循环播放动画
四、案例：使用 Konva 绘制进度条
一、Konva 基本概念
Konva.js，全称
适用于桌面/移动端应用的 HTML5 2d canvas 库
，是一个HTML5 Canvas JavaScript 框架，它提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能。你可以使用 Konva 在舞台上绘制图形，给图形添加事件，移动、缩放和旋转图形并且支持高性能的动画即使包含数千个图形。Konva 具有以下特点：
轻量，使用方便，可适用于 PC 端和移动端；
支持丰富的事件处理操作；
支持类似于 jQuery 的操作方式；
开源，可以随意更改；
性能好。
Konva 中文文档 中文APIKonva Konvajs 中文文档, Konva 是一个HTML5 Canvas JavaScript 框架，它通过对 2d context 的扩展实现了在桌面端和移动端的可交互性。提供了高性能的动画，补间，节点嵌套，布局，滤镜，缓存，事件绑定（桌面/移动端）等等功能.http://konvajs-doc.bluehymn.com/ 在 Konva 的使用中，整个视图可以看成一个舞台 stage，舞台中可以有多个层次 layer，每一层下面又可以有各种形状或者很多组 group，组下面也可以有分组或各种各样的形状 shape，如下示意图：
二、Konva 的使用
1. 引入 Konva
在我们的项目中使用 Konva 前需要先引入 .js 包，可以通过
从 CDN 下载官网 Konva.js 包：
Konva.js 完整版
Konva.js 压缩版
2. Konva 基本绘制步骤
（1）创建一个具有 id 名的 div，用于放置舞台；
（2）创建舞台 stage
var stage = new Konva.Stage({
container: 'container', //指定放置舞台的容器
width: window.innerWidth, //设置宽高
height: window.innerHeight,
})
（3）创建层 layer 并将层添加至舞台；
var layer = new Konva.Layer(); //创建层 layer
stage.add(layer); //将层添加至舞台
（4）创建要绘制的图形(此处以矩形为例)；
var rect = new Konva.Rect({ //创建矩形
x: 100,
y: 100,
opactity: 0.5,
draggable: true,
fill: 'red'
//其余相关属性...
})
（5）将创建的形状添加至层并将层渲染到舞台中；
layer.add(rect); //将图形添加至层
layer.draw(); //将层渲染到舞台
接下来我们结合以上步骤使用 Konva 绘制一个矩形：
使用konva库制作一个矩形
