如何访问原生 2D 上下文

如何从 Konva 访问原生 2D 画布上下文

Konva 为您提供了一个对象模型，用于在画布上绘制形状。您的应用程序从一个舞台（div 包装器）开始，然后舞台内部有一个或多个图层（画布 DOM 元素）。

您可以直接进入 Konva 的内部（或 DOM 的内部），在画布上绘制，而无需创建任何形状。但这并不推荐。因为 Konva 对绘制具有完全控制权，可能会重置您的手动绘图或在任何导出操作中丢失它们，例如 stage.toDataURL()。

如果您想手动绘制内容，有两种推荐的方式：

  1. 使用自定义形状
  2. 手动创建一个新的画布元素，然后将其用于 Konva.Image。
Konva 20000 Nodes Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Native Context Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // if you want to make something with native 2d canvas
      //we can create it and use it for Konva.Image

      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');

      var image = new Konva.Image({
        image: canvas,
        draggable: true,
      });
      layer.add(image);

      // make manual drawings
      ctx.fillStyle = 'blue';
      ctx.fillRect(5, 5, canvas.width - 10, canvas.height / 2);
      ctx.fillStyle = 'red';
      ctx.beginPath();
      ctx.arc(100, 75, 50, 0, 2 * Math.PI);
      ctx.fill();

      // such as canvas is updated we need to redraw the layer

      layer.batchDraw();
    </script>
  </body>
</html>