Konva.js是canvas的一个js库，官网的介绍是：
Konva.js - HTML5 2d canvas js library for desktop and mobile applications
Konva.js-用于桌面和移动应用程序的HTML5 2d canvas js库
本文介绍使用Konva绘制基本图形及基本动画

一、安装

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

二、示例

// first we need to create a stage
var stage = new Konva.Stage({
container: 'container', // id of container <div>
width: 500,
height: 500
});
// then create layer
var layer = new Konva.Layer();
// create our shape
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
// add the shape to the layer
layer.add(circle);
// add the layer to the stage
stage.add(layer);
// draw the image
layer.draw();

三、基本形状

• 1、矩形

var rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      });

• 2、圆

 var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

• 3、椭圆

var oval = new Konva.Ellipse({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radiusX: 100,
        radiusY: 50,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4
      });

• 4、扇形

var wedge = new Konva.Wedge({
        x: stage.width() / 2,
        y: stage.height() / 2,
        radius: 70,
        angle: 60,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        rotation: -120
      });

• 5、线条

 var redLine = new Konva.Line({
        points: [5, 70, 140, 23, 250, 60, 300, 20],
        stroke: 'red',
        strokeWidth: 15,
        lineCap: 'round',
        lineJoin: 'round'
      });

• 6、多边形

var poly = new Konva.Line({
        points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93],
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 5,
        closed: true
      });

• 7、文字

 var simpleText = new Konva.Text({
        x: stage.width() / 2,
        y: 15,
        text: 'Simple Text',
        fontSize: 30,
        fontFamily: 'Calibri',
        fill: 'green'
      });

• 8、圆环

var ring = new Konva.Ring({
        x: stage.width() / 2,
        y: stage.height() / 2,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4
      });

• 9、圆环段

var arc = new Konva.Arc({
        x: stage.width() / 2,
        y: stage.height() / 2,
        innerRadius: 40,
        outerRadius: 70,
        angle: 60,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4
      });

• 10、正多边形

var hexagon = new Konva.RegularPolygon({
        x: 100,
        y: 150,
        sides: 6,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

• 11、自定义

var triangle = new Konva.Shape({
        sceneFunc: function(context, shape) {
          context.beginPath();
          context.moveTo(20, 50);
          context.lineTo(220, 80);
          context.quadraticCurveTo(150, 100, 260, 170);
          context.closePath();

          // (!) Konva specific method, it is very important
          context.fillStrokeShape(shape);
        },
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      });

更多点这里进入官网文档查看

四、动画Tweens示例

var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 50,
y: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
opacity: 0.2
});
layer.add(rect);
stage.add(layer);
// the tween has to be created after the node has been added to the layer
var tween = new Konva.Tween({
node: rect,
duration: 1,
x: 140,
y: 90,
fill: 'red',
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6,
scaleX: 1.5
});
// start tween after 2 seconds
setTimeout(function() {
tween.play();
}, 2000);

五、基本属性介绍

1、width：宽
2、height：高
3、fill: 填充
4、stroke: 边框颜色
5、strokeWidth: 边框宽度
6、radius：半径
7、radiusX:椭圆长半轴长
8、radiusY: 椭圆短半轴长
9、angle：扇形角度
10、rotation：旋转角度
11、points：线条坐标点
12、lineCap：结束线帽
13、lineJoin：当两条线条交汇时边角
14、closed：绘制多边形，闭合线条
15、innerRadius: 圆环内径
16、outerRadius：圆环外径
17、sides：正多边形边数

六、注意问题

• 1、当Konva的基本图形无法满足需求是，可以采用Shape自定义形状，创建自定义形状时，我们需要定义一个传递了Konva.Context渲染器和形状实例的绘图函数
  Konva.Context 是原生2d canvas context的包装，他们具有相同的属性和方法以及一些其他APIcanvas参考手册

• 2、Konva.Tween动画仅仅支持数值属性，例如：width，height，angle等

• 3、使用Konva.Tween实例时，必须在使用后销毁它。