由画布中的drawImage创建的移动图像答案

【问题标题】：Moving image that was created by drawImage in canvas由画布中的drawImage创建的移动图像
【发布时间】：2017-03-24 21:35:19
【问题描述】：

如何在画布中移动图像？没有可以通过 += 或 -= 更改的 x\y 坐标。

【问题讨论】：

首先你是如何将图像放到画布上的？您应该必须在 drawImage 中指定 x/y 偏移量。改变它。
我通过drawImage(my_image, x, y)创建了图像，其中x和y是鼠标点击事件的坐标。
好了，只需保存 x 和 y 值，递增它们，然后重绘。
那么旧图像呢？我应该在每个重绘周期都删除它吗？对性能有好处吗？
Canvas 的工作方式类似于传统的屏幕界面。要更改“框架”，您需要清除它并重绘。性能取决于客户端计算机、画布的大小以及您正在重绘的图像的大小。（如果您想要更准确的测量，则需要进行现场测试）

【解决方案1】：

Canvas 是一个即时的绘图表面。当您拨打drawImage 之类的电话时，画布会将位图渲染到上下文中，然后忘记发生过任何事情。它不跟踪任何内容。

这意味着您需要跟踪所有内容。如果您想要移动的图像，则需要清除画布并在与以前不同的位置重新绘制图像（以及场景中的所有其他内容）。

这以各种方式出现了很多，所以我在managing the state of drawn objects and canvas interactivity 上制作了一个教程，作为对该主题的一个不错的介绍。本教程使用可以在屏幕上拖动的矩形，但使用图像几乎相同。

【讨论】：