简介：
Knova.js 是一个基于HTML5 Canvas 的JavaScript 框架，可以实现高性能的动画，转换，节点嵌套，分层，过滤，缓存，时间处理等等，并且具有良好的响应式布局，可以同时支持电脑桌面和移动应用。
在使用Knova时，可以在Knova.Stage上开始绘制，为它们添加事件监听器，移动它们，缩放它们，即使您的应用程序使用了数千种形状，并将它们从其他形状中独立出来以支持高性能的动画。
该库最初是作为ericdrowell / KineticJS的GitHub分支开始的。
实现方式
所有工作都从Konva.Stage开始，每个stage可以包含多个图层，而每个图层则包含两个canvas渲染器，其中一个是我们所看见的，另一个隐藏，用来提高实现事件监听的效率。
使用示例
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.3/konva.min.js"></script>
<div id="container"></div>
<script>
//首先创建一个stage
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
// 创建图层并添加到stage中
var layer = new Konva.Layer();
stage.add(layer);
// 创建图形
var box = new Konva.Rect({
x: 50,
y: 50,
width: 100,
height: 50,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// 将图像添加到图层
layer.add(box);
// 绘图
layer.draw();
// 添加光标的效果
box.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
document.body.style.cursor = 'default';
});
</script>
效果演示
加载和安装
Konva支持UMD加载。因此，您可以使用所有可能的变体将框架加载到您的项目中：
1. 通过<script>标签来加载Konva：
<script src ="https://cdn.rawgit.com/konvajs/konva/1.7.3/konva.min.js"> </ script >
2. 通过AMD加载：
define(['./konva'], function(Konva) { // your code});
3. 通过npm：
npm install konva --save
导入代码
// old way
var Konva = require('konva');
// modern way
import Konva from 'konva';
// typescript
import * as Konva from 'konva';
4. 如果您使用的是webpack或browserfy，则可以使用此方法仅加载所需的Konva零件：
import Konva from 'konva/src/Core'; // now you have Konva object with Stage, Layer, FastLayer, Group, Shape and some additional utils function // so there are no shapes (rect, circle, etc), no filters, no d&d support. // but you can simply add anything you need: import 'konva/src/shapes/rect'; //now Konva.Rect is available to use
了解更多欢迎进入官方演示站：
