在HTML5画布文本框的值(Textbox value in HTML5 Canvas)

我的工作排序使用HTML5画布名片制造商。要获得自定义名称，地址等...我目前使用的提示框...

现在我得到的是：

要定义变量

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:

一旦你从键按下事件或任何你然后需要清除在画布和重绘新的价值。

所以

OCtx.clearRect（X，Y，W，H）;

//重新运行你的新价值进行初始使用的代码