1

我正在开发一种使用 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";

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

所以这个人只需要在 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
});

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

oCtx.fillText(val, 282, 138);

但是当我在文本框中输入时什么都没有发生……知道为什么吗？

4

2 回答 2

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，但不会捕获退格键。

那应该让你开始！

于 2012-05-25T15:58:59.353 回答
0

一旦您从按键事件或任何您需要清除画布并重新绘制它的东西中获得新值。

所以

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

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

于 2014-08-16T09:06:37.377 回答