Konva 不能将 HTML 元素直接转为舞台，需用 <canvas> 初始化 Konva.Stage；必须显式传入 container、width 和 height，再添加 Layer 和 Shape 并调用 draw() 才能显示内容。
konva怎么把HTML元素变成舞台
Konva 本身不直接“转换” HTML 元素为舞台，它需要一个 <canvas> 元素作为底层渲染容器，再用 JavaScript 初始化 Konva.Stage。你不能把已有 DOM（比如 <div> 或 <p>）一键转成 Konva 舞台——那是两个不同层级的东西：HTML 是 DOM 树，Konva 是基于 Canvas 的绘图抽象。
常见错误现象：TypeError: Konva is not defined（没引入库）、Cannot read property 'width' of null（传了不存在的 <canvas> ID）、舞台空白但控制台无报错（width/height 为 0 或 CSS 隐藏了 canvas）。
- 确保先加载 Konva 库，推荐用 CDN：
<script src="https://unpkg.com/konva@9.5.0/konva.min.js"></script> - 页面中放一个带
id的<canvas>，不是<div>：<canvas id="myCanvas" width="800" height="600"></canvas> - JS 中必须等 DOM 加载完成再初始化：
document.addEventListener('DOMContentLoaded', ...)或把 script 放在 body 底部 - Konva 不读取 CSS 设置的宽高，只认 HTML 属性或 JS 传入的
width/height；若用 CSS 缩放 canvas，会模糊，应直接设属性值
new Konva.Stage() 必须传哪些参数
Konva.Stage 最小可用配置只需 container 和尺寸（width/height），但漏掉任一都会失败。它不自动探测父容器大小，也不从 canvas 元素上读取宽高（除非你手动传）。
使用场景：嵌入到已有页面某区块、响应式布局、与其它 canvas 库共存。
立即学习“前端免费学习笔记（深入）”；
-
container必须是字符串（ID）或 DOM 元素，不能是类名或 querySelector 字符串：container: 'myCanvas'✅，container: '.canvas-wrap'❌ -
width和height必须显式指定数字，单位是像素，不能是'100%'或undefined - 如果 canvas 已有宽高属性，仍建议在 JS 中重复传一次，避免依赖顺序问题
- 可选加
scale或rotation，但会影响所有子节点，慎用
简短示例：
const stage = new Konva.Stage({
container: 'myCanvas',
width: 800,
height: 600
});
为什么舞台创建后啥也不显示
舞台（Konva.Stage）只是容器，本身不画任何东西。Konva 的绘制靠「图层（Konva.Layer）」+「图形（Konva.Rect、Konva.Circle 等）」组合完成。没加 layer，就等于没纸；没加 shape，就等于没笔迹。
性能影响：每个 Konva.Layer 对应一个独立 <canvas>，过多 layer 会增加内存和重绘开销；但全堆在一个 layer 里，修改任意 shape 都要重绘全部，也慢。
- 必须调用
stage.add(layer)把 layer 挂到舞台，否则 layer 不生效 - 必须调用
layer.add(shape)把图形挂到图层，否则图形不渲染 - 必须调用
layer.draw()或stage.draw()才真正触发绘制（Konva 不自动刷新） - 如果用了
Konva.Animation或事件监听，忘记调layer.draw()就会卡住不动
如何让 Konva 舞台随窗口缩放
Konva 没内置响应式，但可以监听 resize 事件手动更新舞台尺寸。注意：直接改 stage.width() 不会自动重绘，且可能破坏内部缓存；正确做法是重设容器尺寸 + 调用 stage.size() + stage.draw()。
兼容性影响：移动端 touch 事件需额外启用 listening: true，否则 shape 不响应点击；缩放时若未同步更新 scaleX/scaleY，坐标会错乱。
- 别用 CSS
transform: scale()缩放 canvas，会导致鼠标位置计算偏移 - 监听
window.onresize后，先获取新尺寸，再调stage.size({ width: w, height: h }) - 之后必须跟
stage.draw()，否则画面不会更新 - 如果 layer 里有文字或图标，缩放后可能模糊，建议用矢量路径或适配 DPR（
window.devicePixelRatio）
容易被忽略的一点：Konva 的坐标系统默认以左上角为原点，缩放后所有 getPointerPosition() 返回的坐标也要按比例换算，否则拖拽、点击都会偏移。
