如何使用 HTML5 jquery 将元素放在画布上的鼠标位置

【问题标题】：How to drop an element on canvas at mouse position using HTML5 jquery如何使用 HTML5 jquery 将元素放在画布上的鼠标位置
【发布时间】：2015-04-09 12:22:20
【问题描述】：

我是 HTML5 新手，希望在释放鼠标按钮时将元素放在画布/div 上的鼠标位置。

我使用 appendChild 在目标上添加元素，它落在 DIV 的起始位置，是问题。

HTML5: dragover(), drop(): how get current x,y coordinates?我找到了这个，但它没有在特定位置添加元素的代码。

【问题讨论】：

stackoverflow.com/questions/2438320/… 我找到了这个，但它没有在特定位置添加元素的代码。
您可以放置一个元素，获取鼠标位置和放置的元素，但您不能将 DOM 元素附加到画布上。画布就像一个图像（只是“可写”）。

标签： jquery html html5-canvas

【解决方案1】：

据我了解您的问题，您想在 drop 事件发生时确定光标在元素上的相对位置。如果是这样，光标在块元素上的位置可以通过以下方式计算：

+--- 身体 -------- | | | +--- 分区 --- | | | | X

x - 是光标

通过drop 事件确定光标位置
确定<div> 在页面上的位置（左上角）
cursorX - divX = X position（相对于<div>）
cursorY - divY = Y position（相对于<div>）

! 请注意，您无法将 DOM 节点添加到 <canvas>。

【讨论】：