什么是 Konva
Konva.js 是一个 H5 Canvas 的 JavaScript 框架，我们可以通过制作桌面端和移动端的 apps。
Konva 支持动画、转换、节点嵌套、图层、过滤、缓存、事件（桌面端和移动端）等。在 Konva 中，所有的图形都存在于 stage 中，即便是你的 app 使用了成百上千的 shapes（图形）也可以在 stage 中许多与图形对应的多个事件，以实现移动、缩放、旋转等功能。
Konva 的结构
Stage
|
+------+------+
| |
Layer Layer
| |
+-----+-----+ Shape
| |
Group Group
| |
+ +---+---+
| | |
Shape Group Shape
|
+
|
Shape
Stage（容器）
在 Konva 中，一切的开端始于 Konva.Stage 这个类，它包含了用户定义的 Konva.Layer，可以说 Stage 是 Konva 的容器，我们的图形都存在于这里面。
在 H5 中，Stage 表现为一个普通的 div 标签，例如，创建一个 Konva 容器：
file:[创建 Konva.Stage]
<body>
<div id="container"></div>
<script>
// stage 是一个容器，装所有的 layer
const stage = new Konva.Stage({
container: "container", // id 选择器
width: window.innerWidth,
height: window.innerHeight
});
</script>
</body>
Layer（图层）
如上结构所示，Stage 下面有许多 Layer（图层），图层在 PS、绘画中很容易出现，我们可以理解图层中包含了许多的 Shapes（图形）、组（Group）。
入门示例
<body>
<div id="container"></div>
<script>
// stage 是一个容器，装所有的 layer
const stage = new Konva.Stage({
container: "container",
width: window.innerWidth,
height: window.innerHeight
});
// 创建图层1
const layer1 = new Konva.Layer();
// 创建 rect1
const rect1 = new Konva.Rect({
x: 20,
y: 20,
width: 100,
height: 50,
fill: "green",
stroke: "black",
strokeWidth: 2
});
// 把 rect1 添加到图层1中，一个图层有许多的图形、组。
layer1.add(rect1);
const layer2 = new Konva.Layer();
const rect2 = new Konva.Rect({
x: 150,
y: 40,
width: 100,
height: 50,
fill: "red",
shadowBlur: 10,
cornerRadius: 10
});
layer2.add(rect2);
const layer3 = new Konva.Layer();
const rect3 = new Konva.Rect({
x: 50,
y: 120,
width: 100,
height: 100,
fill: "blue",
cornerRadius: [0, 10, 20, 30]
});
const rect4 = new Konva.Rect({
x: 250,
y: 150,
width: 100,
height: 100,
fill: "#525288",
cornerRadius: 5
});
layer3.add(rect3);
layer3.add(rect4);
// 把图层1、2、3添加到容器中
stage.add(layer1);
stage.add(layer2);
stage.add(layer3);
</script>
</body>
JS 代码解释
如上所示中，我创建了三个 Layer，每一个图层都有一个矩形（Shape），Layer 图层创建好了之后把它放入 Stage 中。
每一个图形都可以自定义样式，如圆角、填充颜色、宽度、高度等。
H5 结构解释
如上图所示，容器下面有三个 canvas 标签，正好对应了我们三个图层（Layer），图层中有自己的图形（Shape）。
标签：Layer,const,Konva,Canvas,js,new,图层,Stage From： https://www.cnblogs.com/Himmelbleu/p/17576159.html