HTML5 Canvas中的文本框值

Question

我正在使用HTML5 Canvas做某种名片制造商。 要获取自定义名称，地址等...我目前正在使用PROMPT Box ...

现在我得到的是：

定义变量

var name = prompt("Votre nom","")
var address = prompt("Votre adresse","")
var title = prompt("Votre titre","")

然后在画布上绘制：

img.onload = function(){
oCtx.drawImage(img,0,0);

oCtx.font = "normal 25px arial";     // different font
oCtx.textBaseline = "top";           // text baseline at the top
oCtx.fillStyle = "#00529e";
oCtx.fillText(address, 283, 138);

oCtx.font = "bold 45px arial";     // different font
oCtx.fillText(name, 283, 350);

oCtx.font = "normal 40px arial";     // different font
oCtx.fillText(title, 283, 410);
};
img.src="back.png";

从“提示”框中获取价值非常有用。 但是我想做一些更清洁的事情，而改用用户文本框。

因此，该家伙只需要在“画布”旁边输入一个文本框，然后在他输入文本框时，它将自动更新“名称”变量或“地址”或“标题”的内容。

我该如何进行这项工作？

---

编辑

这是我尝试过的...但是那不起作用：

<input type="text" id="testing"/>

我将在此文本框中输入内容，然后进行更新：

oCtx.fillText(document.getElementById('testing').value), 282, 138);

现在是：

oCtx.fillText(address, 282, 138);

谢谢

---

编辑2

我试过了 ：

document.getElementById("testing").addEventListener("change", function() {
    var val = document.getElementById("testing").value;
    // now use val in your existing fillText code
});

“测试”是我的文本框的ID ...然后我将fillText更改为：

oCtx.fillText(val, 282, 138);

但是，当我在文本框中输入内容时，什么也没发生...知道为什么吗？

Answer 1

在文本区域上使用keypress处理程序：

document.getElementById("mytextbox").addEventListener("keydown", function() {
    var val = document.getElementById("mytextbox").value;
    // now use val in your existing fillText code
});

请注意，您可以使用change事件而不是keydown事件，但是只有在用户将焦点从文本框移开后， change才会触发。 keypress事件的工作原理与keydown相似，但不会捕获退格键。

那应该让您开始！

Answer 2

一旦您从key down事件获得了新的值，或者您需要清除画布并重新绘制它，则需要执行任何操作。

所以

OCtx.clearRect（x，y，w，h）;

//使用新值运行您最初使用的代码