HTML5 Canvas中的文本框值

时间:2012-05-25 15:44:45

标签: javascript html5 canvas html5-canvas

我正在使用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";

从PROMPT框中获取价值非常有用。 但我想做一些更清洁的事情,而不是用户文本框。

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

我该如何做到这一点?


修改

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

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

“testing”是我文本框的ID ... 我将fillText更改为:

oCtx.fillText(val, 282, 138);

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

2 个答案:

答案 0 :(得分:0)

在文字区域使用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的工作方式类似,但不会捕获退格。

那应该让你开始吧!

答案 1 :(得分:0)

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

所以

OCtx.clearRect(x,y,w,h);

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