Javascript 如何使画布文本可单击/可悬停？

因此，我使用

c.fillText

将文本显示到html画布。我希望这样，当我在显示的文本上单击/悬停时，会出现一个框，我们可以在其中输入文本。这可能吗

var canvas=document.querySelector（'canvas'）；
canvas.width=“1290”；
canvas.height=“580”；
var c=canvas.getContext（“2d”）；
函数ques（）{
var question=document.getElementById（“qInput”）.value；
//窗口。警报（问题）；
var randomColor=Math.floor（Math.random（）*16777215）.toString（16）；
var fontSize=Math.floor（Math.random（）*45+12）；
var x=数学地板（数学随机（）*1200）；
var y=Math.floor（Math.random（）*580）；
c、 fillStyle=“#”+随机颜色；
c、 font=fontSize+“px乘以新罗马”；
c、 填充文本（问题，x，y）；
}

画布{
/*
位置：绝对位置；
最高：9%；
左：2.5%；
*/
边框：1px实心#ddd；
}

阳光下的日子

如果我理解你的意思，你可以用：
1） 使用CSS制作文本的光标指针

canvas{
cursor:pointer;
}

2） 使用javaScript

document.getElementByTagName('canvas').addEventListener('click' , myFunction);

---

在这个函数中，您可以使用javasript来更改DOM。如果您希望悬停，请使用鼠标悬停重放“click”，但如果您使用鼠标悬停，则必须使用“mouseout”在同一元素上创建另一个事件。

如果我理解您的意思，您可以使用：
1） 使用CSS制作文本的光标指针

canvas{
cursor:pointer;
}

2） 使用javaScript

document.getElementByTagName('canvas').addEventListener('click' , myFunction);

---

在这个函数中，您可以使用javasript来更改DOM。如果您希望悬停，请使用鼠标悬停重放“click”，但如果您使用鼠标悬停，则必须使用“mouseout”在同一元素上生成另一个事件。在这种情况下，请使用诸如Phaser/PIXI之类的框架。但是如果你想用本地画布制作，嗯：

• 您拥有文本的x/y坐标（相对于画布元素）（左侧和顶部x/y）
• 您可以使用以下方法获取文本的右坐标和底部坐标：

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  ctx.measureText(text).width/height
  

• 现在，单击鼠标移动（悬停模拟）事件，只需比较光标的坐标（e.clientX，e.clientY）和文本的框架，它们是否会聚

下面的链接提供了更多示例说明：

---

在这种情况下，使用Phaser/PIXI之类的框架。但是如果你想用本地画布制作，嗯：

• 您拥有文本的x/y坐标（相对于画布元素）（左侧和顶部x/y）
• 您可以使用以下方法获取文本的右坐标和底部坐标：

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");
  ctx.measureText(text).width/height
  

• 现在，单击鼠标移动（悬停模拟）事件，只需比较光标的坐标（e.clientX，e.clientY）和文本的框架，它们是否会聚

下面的链接提供了更多示例说明：