konva.jsFabric.js 是一个HTML5 Canvas JavaScript框架，它扩展了2d上下文通过为桌

Fabric.js 是一个HTML5 Canvas JavaScript框架，它扩展了2d上下文通过为桌面和移动应用程序启用画布交互。Konva支持高性能动画、转换、节点嵌套、分层、过滤，缓存、桌面和移动应用程序的事件处理等等。

安装方式

npm install konva  || <script src="https://unpkg.com/konva@9/konva.min.js"></script>

画布创建

 //首先创建stage
 var stage = new Konva.Stage({   
 container: 'container',   // id of container <div>   
 width: 500,   
 height: 500 });
//然后创建layer
var layer = new Konva.Layer();

//接下来就是我们开始画形状-圆
var circle = new Konva.Circle({
  x: stage.width() / 2,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
})

//然后需要将图形添加到layer上
layer.add(circle);


// 然后需要将layer添加到画布上
stage.add(layer);

// 然后执行draw 
layer.draw();

Konva.js支持形状：矩形、圆形、椭圆、直线、多边形、样条线、Blob、图像、文本、文本路径、星形、标签、SVG路径、RegularPolygon。

还自持创建自定义形状：Konva.js支持以下形状：矩形、圆形、椭圆、直线、多边形、样条线、Blob、图像、文本、文本路径、星形、标签、SVG路径、RegularPolygon。

支持样式


var pentagon = new Konva.RegularPolygon({     
x: stage.width() / 2,     
y: stage.height() / 2,     
sides: 5,     
radius: 70,  //半径
fill: 'red',    //填充颜色
stroke: 'black', //线色
strokeWidth: 4,     //线宽
shadowOffsetX : 20,     //偏移X
shadowOffsetY : 25,     //偏移Y
shadowBlur : 40,     //阴影模糊
opacity : 0.5 //透明度
});

支持事件

使用Konva，可以监听用户输入事件（click, dblclick, mouseover, tap, dbltap, touchstart ），属性更改事件（scaleXChange、fillChange）和拖放事件（dragstart、dragmove、dragend）。

circle.on('click', function() {     
console.log('用户点击'); 
});  
circle.on('xChange', function() {     
console.log('位置改变'); 
});  
circle.on('dragend', function() {     
console.log('拖动结束'); 
});

如果需要开启拖拽功能，只需要

shape.draggable('true');

动画 Konva.Animation

var anim = new Konva.Animation(function(frame) {
    var time = frame.time,
        timeDiff = frame.timeDiff,
        frameRate = frame.frameRate;
}, layer);
anim.start();

动画Konva.Tween

var tween = new Konva.Tween({  
node: rect,  
duration: 1,  
x: 140,  
rotation: Math.PI * 2,  
opacity: 1,  
strokeWidth: 6  
});  
tween.play();

//简便写法
circle.to({  
duration : 1,  
fill : 'green'  
});

选择器

在构建大型应用程序时，在元素中使用搜索非常有用。Konva可以帮助您找到一个带有选择器的元素。您可以使用find（）方法（返回集合）或findOne（）方法）（返回集合的第一个元素）。

var circle = new Konva.Circle({         
radius: 10,         
fill: 'red',        
id : 'face',         
name : 'red circle' 
}); 
layer.add(circle);  

// 通过形状查找
layer.find('Circle');  
// 通过Id查找
layer.findOne('#face'); 
// 通过类名查找
layer.find('.red')

序列化和反序列化

在Konva中所有创建的对象都可以保存为JSON，可以将其保存到服务器或本地存储中。

var json = stage.toJSON();

var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';  
var stage = Konva.Node.create(json, 'container');

拓展

还可以将元素绘制到缓冲区画布中

shape.cache();