什么是 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>