javascript - 更改鼠标单击 Canvas 上的文本

Question

我目前有文本显示“可用空间”，悬停显示“单击此处预订自行车”。当用户在 Canvas 上单击时，颜色会变为红色，但如何才能使文本从“单击此处预订自行车”变为“自行车预订”。

这是代码 https://jsfiddle.net/nayshal/j2y7jm4t/

<div id="canvas-wrap">
  <canvas id="canvas" width=150 height=100> </canvas>
    <p class="text">Click here to reserve bike</p>
    <p class="text1">Free Space</p>
<div id="overlay"></div>
</div>


var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.rect(0, 0, 180, 100);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();

document.addEventListener('click',mouseClick,false);
function mouseClick(e)
{  
ctx.fillStyle = "#FF0000";
ctx.fill();

}

Answer 1

在我看来，你所做的一切毫无意义。您不使用 HTML 在 Canvas 顶部添加文本!您应该像这样使用 Javascript 添加:

ctx.font = "30px Verdana";
ctx.fillText("Hello World", 10, 50);

否则使用 Canvas 毫无意义。如果你想在这样做之后更改文本，你需要基本上删除所有内容并重新设置它，因为 fillText() 在 Canvas 上“种植”文本。让它坚持下去。它不是您可以编辑的对象，因此您需要刷新它并创建新文本。

https://jsfiddle.net/j2y7jm4t/2/

ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.fillStyle = "#000";
ctx.font = "20px Arial";
ctx.textAlign = 'center';
ctx.fillText("Bike reserved", 75, 50);

这有意义吗？

---

现在为了改变文本，你会做这样的事情:

https://jsfiddle.net/j2y7jm4t/3/

首先将您的文本设置为默认文本:

ctx.fillStyle = "#000";
ctx.font = "12px Arial";
ctx.textAlign = 'center';
ctx.fillText("Click here to reserve bike", 75, 50);

现在它会说

Click here to reserve bike

然后只需返回并在点击函数中添加您需要做的任何事情，您可以在此处看到:

ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.fillStyle = "#000";
ctx.fillText("Bike reserved", 75, 50);

可以吗？