我已经为你做了这个JSFiddle，以便更容易解释。
有两个图像，一个在顶部，是灰色环绕，中间有一个透明矩形。也是背后的照片，只是白色的红色方块。我希望用户能够将图像拖到后面（红色方块）并使图像可调整大小。我有一些问题：
我不知道如何使图像可拖动，我用Google搜索但我并不理解它。
图像位于静态图像后面，单击将只是单击顶部图像而不是后面的图像。
背后的图像有时是在前面的图像之后绘制的，所以我认为我需要对前图像进行延迟绘制。我也不知道怎么做。
显然，这些图片只是出于您的目的。一旦用户调整了图像大小并将其移动到正确的位置，它们将被按下载，画布将转换为png并保存到服务器，然后下载到用户。使用PHP，不知道如何做到这一点，但我想我可以解决这个...也许:)这主要是拖动和调整大小位，这一刻让我烦恼。
如果有人可以提供帮助，那将是惊人的，我会非常感谢你。 :)这是我第一次在这里问一个问题。
答案 0 :(得分：0)
欢迎使用StackOverflow：）
有很多方法可以解决这个问题。您可以使用纯HTML或SVG或Canvas执行此操作。对于canvas，您需要创建自己的持久对象并拖动代码。我做了tutorials on making and moving selectable shapes on a canvas.（虽然我实际上正在对它们进行大修以使它们更容易理解，所以请在一两天内保持关注）。
SVG可能更容易让所有这些工作，因为事件已经内置到每个SVG对象中。关于可拖动SVG对象的教程应该很容易找到。
您希望拥有的代码会在每次放置对象时检查它是否在您想要的范围内是否正确。准备好跟踪许多x，y位置以及每个物体的宽度和高度。
至于3：这是因为您没有使用图像的onload事件。请参阅StackOverflow上的其他问题，例如求助：Image drawn to HTML5 Canvas does not display correctly on first load