如何从一个 HTML5 画布拖放到另一个画布
我试图弄清楚如何将图像从一个画布拖放到另一个画布。假设画布彼此相邻，是否可以无缝地将某些东西拖过边界？如果不是，将 div 拖到画布上，获取其 ID，然后通过响应画布上的 mouseup 位置来放置它是不是更好？
I'm trying to figure out how to drag and drop an image from one canvas to another canvas. Assuming the canvases are next to each other, would it be possible to seamlessly drag something across the border? If not, is it a better idea to drag a div over the canvas, get its ID, and place it by responding to the mouseup location on the canvas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您不能在画布上拖动项目。画布是非保留模式（或立即模式) 图形 API。您发出绘制命令并获得像素。模拟拖动包括跟踪用户的鼠标移动，并选择使用不同的参数重复清除和重新绘制画布，以使像素的某些子集看起来像一个粘性对象一样移动。
将此与 HTML 或 SVG 进行对比，在 HTML 或 SVG 中，您实际上可以更改真实 DOM 对象的位置/变换属性，并且当文档的视觉表示自动更新时，手表
会自动更新。如果您有两个画布并想要从中拖动某些内容一对一，我要做的是：
mousemove事件，并更新画布相对于鼠标的位置。不过，我在这里可能真正要做的是使用 SVG。 ;)
You don't drag items on a canvas. A canvas is a non-retained mode (or immediate mode) graphics API. You issue draw commands and you get pixels. Simulating dragging is comprised of tracking the user's mouse movements and choosing to repeatedly clear and re-draw the canvas with different parameters to make some subset of the pixels appear to move as a cohesive object.
Contrast this with HTML or SVG where you actually change position/transform properties of a real DOM object and the watch as the visual representation of your document updates automatically.
If you have two canvases and want to drag something from one to the other, what I would do is:
mousemoveevent on the document, and update the position of the canvas relative to the mouse.Though, what I'd probably really do here is use SVG. ;)
检查此答案。
它用于多选拖放下降，但也许会有用。
Check this answer.
It is for multiple select drag & drop, but maybe will be useful.
为什么这需要 2 个画布？画布是您的绘图区域，您可以控制它。为什么需要2个？
Why does this need to be 2 canvases? The canvas is your drawing area, you control it. Why do you need 2?