Question

我目前的文字显示“自由空间”，悬停说“点击此处预订自行车”。当用户点击画布时，颜色变为红色，但我如何制作，以便文本从“点击此处预约自行车”变为“自行车保留”。

这是代码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在画布顶部添加文本！你应该使用这样的Javascript添加它：

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

否则使用画布没有意义。如果您想在执行此操作后更改文本，则需要基本删除所有内容并重新设置，因为fillText()'植入'画布上的文本。让它坚持下去。它不是您可以编辑的对象，因此您需要刷新它并创建新文本。

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功能中添加您需要做的任何事情，如下所示：

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

工作是吗？

Answer 2

在mouseClick事件中，你需要访问包含＆＃34的DOM元素;点击这里预约自行车＆＃34;文本。

document.getElementByClassName('text').innerHTML = "bike reserved"

将实现您的目标，我建议使用ID（单用标识符，而不是可以在元素之间共享的类）

e / - 我也相信你可能错误地使用了画布，<p>标签是一个html元素而不是画布的一部分，如果你想在画布上绘制文字，请在这里阅读： http://www.w3schools.com/canvas/canvas_text.asp

在鼠标滑动画布上更改文本

2 个答案: