我目前有文本显示“可用空间”,悬停显示“单击此处预订自行车”。当用户在 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();
}
最佳答案
在我看来,你所做的一切毫无意义。您不使用 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);
可以吗?
关于javascript - 更改鼠标单击 Canvas 上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35605347/