使用 React 绘制 Canvas 图形

所有 react-konva 组件都对应同名的 Konva 组件。 除非另有说明，Konva 对象的所有可用参数都是对应 react-konva 组件的有效 props。

核心图形包括：Rect、Circle、Ellipse、Line、Image、Text、TextPath、Star、 Label、SVG Path、RegularPolygon。你还可以创建 自定义图形。

下面的示例展示一些使用不同样式选项的基本图形：

import React from 'react';
import { Stage, Layer, Rect, Text, Circle, Line } from 'react-konva';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="Some text on canvas" fontSize={15} />
        <Rect
          x={20}
          y={50}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
        />
        <Circle x={200} y={100} radius={50} fill="green" />
        <Line
          x={20}
          y={200}
          points={[0, 0, 100, 0, 100, 100]}
          tension={0.5}
          closed
          stroke="black"
          fillLinearGradientStartPoint={{ x: -50, y: -50 }}
          fillLinearGradientEndPoint={{ x: 50, y: 50 }}
          fillLinearGradientColorStops={[0, 'red', 1, 'yellow']}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox