HTML5 画布 SVG 路径教程

要使用 Konva 创建一个 SVG 路径，我们可以实例化一个 Konva.Path() 对象。

路径最常用于将 SVG 路径导出为 HTML5 画布路径，或者当我们希望将复杂图形表示为数据字符串而不是创建自定义形状时。

有关属性和方法的完整列表，请查看 Konva.Path 文档。

如果你想将完整的 SVG 图像绘制到画布上，可以查看如何绘制 SVG 图像的帖子。

Konva Path 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 Path Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      var layer = new Konva.Layer();

      var path = new Konva.Path({
        x: 50,
        y: 40,
        data: 'M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9C33.3,145.1,67.5,170.3,125,217c59.3.186.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9.3.18.1,6.7z',
        fill: 'green',
        scaleX: 0.5,
        scaleY: 0.5,
      });

      // add the shape to the layer
      layer.add(path);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>