Skip to main content

使用 Konva 开始 Svelte 和 canvas

如何在 Svelte 中使用 canvas？​

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

为了使用 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>