通过 Konva 开始使用 Svelte 和 Canvas

如何在 Svelte 中使用 Canvas？

svelte-konva 是一个使用 Svelte 绘制复杂 Canvas 图形的 JavaScript 库。它为 Konva 框架 提供声明式响应式绑定。所有 svelte-konva 组件都对应同名的 Konva 组件。Konva 对象的所有可用参数都可以作为单独的 props 添加到对应的 svalte-konva 组件中。

使用 svelte-konva 前，需要基本了解 Konva。可以参阅 Konva 概览。

快速开始

1 通过 npm 安装

npm i svelte-konva konva

2 导入并使用 svelte-konva 组件

<script>
  import { Stage, Layer, Rect } from 'svelte-konva';
</script>

<Stage width={window.innerWidth} height={window.innerHeight}>
  <Layer>
    <Rect x={100} y={100} width={400} height={200} fill="blue" />
  </Layer>
</Stage>