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