HTML5 Canvas中的文本框值

我正在使用HTML5 Canvas制作某种名片制作器。要获得自定义名称，地址等...我目前使用的提示框......HTML5 Canvas中的文本框值

现在我得到的是：

要定义变量

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";

它的工作很好，从PROMPT框中获取值。但我想做一些更干净的，用户文本框来代替。

所以这个人只需要在Canvas旁边输入一个文本框，当他在文本框中输入时，它会自动更新“name”变量或“address”或“title”的内容，。

我该如何做这项工作？

编辑

这里就是我想...但不工作：

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

我就打入这个文本框，然后将更新：

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

现在，它是：

oCtx.fillText(address, 282, 138);

感谢

EDIT 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);

但是当我输入文本框时没有任何事情发生......任何想法为什么？

来源

2012-05-25 larin555

最初使用的代码你尝试过什么？ **提示：**您希望它在输入时更新，因此请尝试在TextBox上找到一个事件，您可以利用它来运行您在上面提供的功能。 – Widor

以及我已经尝试过： ...然后获取值：oCtx.fillText（document.getElementById（'example_text'）。value，283,350）; .. 。但它不工作，没有任何反应 – larin555

@ user1388136 - 这是因为你需要一个事件来触发你的画布元素的更新。您可能需要onblur或onchange事件。 – j08691

你的文本区域使用keypress处理程序：

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

注意，你可以使用change事件，而不是事件，但change后，才在用户移动焦点从文本框远离火灾。 keypress事件将与类似，但它不会回退空位。

这应该让你开始！

来源

2012-05-25 15:58:59 apsillers

当我使用你的代码时，它给了我一个错误...也许有错误吗？ – larin555

哦，我错过了一个右括号（现在编辑和修复）。是它吗？什么是错误？ – apsillers

是的，就是这样。现在我尝试了你的代码，但它不工作。当我输入文本框时没有任何事情发生。在我的第一篇文章中看到我的编辑，看看我做了什么。谢谢！ – larin555

一旦你从关键事件中获得了新的值，或者你需要清除画布并重画它。

所以

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

//重新运行你的新价值

来源

2014-08-16 09:06:37

HTML5 Canvas中的文本框值

回答

相关问题