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

二、示例


// first we need to create a stage var stage = new Konva.Stage({

container: ‘container’, // id of container

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、矩形
  1. var rect1 = new Konva.Rect({
  2.         x: 20,
  3.         y: 20,
  4.         width: 100,
  5.         height: 50,
  6.         fill: 'green',
  7.         stroke: 'black',
  8.         strokeWidth: 4
  9.       });
  • 2、圆
  1.  var circle = new Konva.Circle({
  2.         x: stage.width() / 2,
  3.         y: stage.height() / 2,
  4.         radius: 70,
  5.         fill: 'red',
  6.         stroke: 'black',
  7.         strokeWidth: 4
  8.       });
  • 3、椭圆
  1. var oval = new Konva.Ellipse({
  2.         x: stage.width() / 2,
  3.         y: stage.height() / 2,
  4.         radiusX: 100,
  5.         radiusY: 50,
  6.         fill: 'yellow',
  7.         stroke: 'black',
  8.         strokeWidth: 4
  9.       });
  • 4、扇形
  1. var wedge = new Konva.Wedge({
  2.         x: stage.width() / 2,
  3.         y: stage.height() / 2,
  4.         radius: 70,
  5.         angle: 60,
  6.         fill: 'red',
  7.         stroke: 'black',
  8.         strokeWidth: 4,
  9.         rotation: -120
  10.       });
  • 5、线条
  1.  var redLine = new Konva.Line({
  2.         points: [5, 70, 140, 23, 250, 60, 300, 20],
  3.         stroke: 'red',
  4.         strokeWidth: 15,
  5.         lineCap: 'round',
  6.         lineJoin: 'round'
  7.       });
  • 6、多边形
  1. var poly = new Konva.Line({
  2.         points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93],
  3.         fill: '#00D2FF',
  4.         stroke: 'black',
  5.         strokeWidth: 5,
  6.         closed: true
  7.       });
  • 7、文字
  1.  var simpleText = new Konva.Text({
  2.         x: stage.width() / 2,
  3.         y: 15,
  4.         text: 'Simple Text',
  5.         fontSize: 30,
  6.         fontFamily: 'Calibri',
  7.         fill: 'green'
  8.       });
  • 8、圆环
  1. var ring = new Konva.Ring({
  2.         x: stage.width() / 2,
  3.         y: stage.height() / 2,
  4.         innerRadius: 40,
  5.         outerRadius: 70,
  6.         fill: 'yellow',
  7.         stroke: 'black',
  8.         strokeWidth: 4
  9.       });
  • 9、圆环段
  1. var arc = new Konva.Arc({
  2.         x: stage.width() / 2,
  3.         y: stage.height() / 2,
  4.         innerRadius: 40,
  5.         outerRadius: 70,
  6.         angle: 60,
  7.         fill: 'yellow',
  8.         stroke: 'black',
  9.         strokeWidth: 4
  10.       });
  • 10、正多边形
  1. var hexagon = new Konva.RegularPolygon({
  2.         x: 100,
  3.         y: 150,
  4.         sides: 6,
  5.         radius: 70,
  6.         fill: 'red',
  7.         stroke: 'black',
  8.         strokeWidth: 4
  9.       });
  • 11、自定义
  1. var triangle = new Konva.Shape({
  2.         sceneFunc: function(context, shape) {
  3.           context.beginPath();
  4.           context.moveTo(20, 50);
  5.           context.lineTo(220, 80);
  6.           context.quadraticCurveTo(150, 100, 260, 170);
  7.           context.closePath();
  9.           // (!) Konva specific method, it is very important
  10.           context.fillStrokeShape(shape);
  11.         },
  12.         fill: '#00D2FF',
  13.         stroke: 'black',
  14.         strokeWidth: 4
  15.       });

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

四、动画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实例时，必须在使用后销毁它。