如何使畫布文本可點擊/可懸停？

Question

所以我用c.fillText將文本顯示到 html 畫布上。 我想讓它當我點擊/懸停在顯示的文本上時，會出現一個框，我們可以在其中輸入文本。 這可能嗎？

 var canvas = document.querySelector('canvas'); canvas.width = "1290"; canvas.height = "580"; var c = canvas.getContext("2d"); function ques() { var question = document.getElementById("qInput").value; //window.alert(question); var randomColor = Math.floor(Math.random() * 16777215).toString(16); var fontSize = Math.floor(Math.random() * 45 + 12); var x = Math.floor(Math.random() * 1200); var y = Math.floor(Math.random() * 580); c.fillStyle = "#" + randomColor; c.font = fontSize + "px Times New Roman"; c.fillText(question, x, y); }

 canvas { /* position: absolute; top: 9%; left: 2.5%; */ border: 1px solid #ddd; }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <p class="title">Days in the Sun</p> <canvas></canvas> <!--for the search bar--> <div class="search"> <input type="text" placeholder="Search.." name="search" id="qInput"> <button type="submit" onclick="ques()"> <i class="fa fa-search"></i> </button> </div>

Answer 1

如果我理解你，你可以這樣做：
1）用CSS制作文本的光標指針。

canvas{
cursor:pointer;
}

2）使用javaScript。

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

在這個函數中，你可以使用 javasript 來改變 DOM。如果你想被懸停，請用鼠標懸停替換“單擊”，但是如果你使用鼠標懸停，你必須用“鼠標懸停”在同一元素上創建另一個事件

Answer 2

在這種情況下，使用 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）和文本框架的坐標，它們是否會聚。

這里有更多示例說明，在下面的鏈接中： HTML Canvas Hover Text