Question

所以我需要在我正在处理的程序中单击的位置出现文本，问题是我完全不知道该怎么做。所以我的问题是：

这可能吗？
如果是这样，我该怎么做才能达到这个效果？

感谢任何指导＆lt; 3我目前正在使用javascript，但如果我需要像jquery这样的插件来执行此操作，我愿意接受建议。

更多细节：当我点击画布上的任何地方时 - 我希望能够在该位置输出文字。最终，我会在点击位置的上方，下方，左侧和右侧显示单独的文本，以便用户知道来自哪里的力量。

Answer 1

您可以获得如下所示的点击位置，并使用它来放置文字。

$("#myButton").click(function(e) {
    alert(e.clientX + ", "+ e.clientY);
})

canvas.addEventListener("mousedown", getPosition, false);

function getPosition(event)
{
  var x = event.x;
  var y = event.y;    
  var canvas = document.getElementById("canvas");    
  x -= canvas.offsetLeft;
  y -= canvas.offsetTop;
}

Answer 2

您可以使用javascript addEventListener方法使用您自己的函数获取mouseclick位置的clientX和clientY。一旦你获得鼠标点击的位置，你可以使用javascript.createElement（“P”）并将该元素准确定位在你想要的位置。详细了解这两个链接：http://www.kirupa.com/html5/getting_mouse_click_position.htm和http://www.htmlforums.com/html-xhtml/t-putting-text-in-a-specific-location-129657.html。一个示例代码可能是这个

<html>
<body>
<script type="text/javascript">
var body = document.body;
body.addEventListener("click", getPosition);

function getPosition(e)
{
     var x = e.clientX;
     var y = e.clientY;
     document.write("<p id='add'>TEXT</p>");
     var text = document.getElementById('add');
     text.style.position = "absolute";
     text.style.top = y;
     text.style.left = x;
}
</script>
</body>
</html>

在点击位置点击创建文本

2 个答案: