Question

I am working on sort of a Business Card maker using HTML5 Canvas. To get custom Name, Address, etc...I m currently using 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";

It s working great getting the value from the PROMPT box. But I would like to do something cleaner, and user textboxes instead.

所以这个家伙只需要输入在 Canvas 旁边的文本框中, 当他输入到文本框中时, 它会自动更新“ 名称” 变量或“ 地址” 或“ 标题” 的内容。

我怎么能让这工作?

编辑编辑编辑编辑编辑编辑

这里我尝试了... 但是这不起作用:

<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" being the ID of my textbox... And I changed the fillText to :

oCtx.fillText(val, 282, 138);

但是当我输入文本框时什么都不会发生... 知道为什么吗?

Answer 1

在您的文本区域使用 keeypress 处理器 :

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) ; 清晰矩形( x, y, w, h) ;

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

友情链接