Javascript 如何在不重新渲染的情况下移动画布内容

我基本上是在写一个思维导图应用程序，我希望能够点击并拖动地图来移动它

所以我已经开始使用HTML画布来做这个，我直接画到它，但它看起来非常慢。 尤其是在拖动时，因为需要重新渲染整个画布

所以我的问题是：有没有办法保留内容，只是基本上翻译内容，而不必清除所有内容，并将每个部分单独稍微向左渲染

我尝试在mousedrag上使用canvas.getContext（“2d”）.translate（camera.x，camera.y）进行“just”操作，但实际上没有任何作用

---

我正在使用svelte作为框架

将画布另存为图像，然后只渲染image@ASDFGerte无需将画布保存为图像（在某些设备上可能非常慢）。画布是图像（类似），可以通过另一个画布上的2D API绘制，甚至可以使用

ctx.drawImage（画布，0，0）自行绘制

@Blindman67是的，没错。我的评论并没有给出一个完整的答案，它只是暗示了一种可能的解决方法。如果画布本身被用作存储，那么它必须是不同的画布，而不是用于实际绘制用户将看到的翻译视图的画布。无论如何，一些额外的逻辑是必要的，不管怎样。