簡介：
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
了解更多歡迎進入官方演示站：
