HTML5 Canvas中的文本框值

问题描述

我在使用HTML5 Canvas制作名片制作工具。
要获取自定义名称，地址等...我目前正在使用PROMPT Box ...

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

从PROMPT框获得值很有效。
但是我想做一些更干净的，用户的文本框。

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

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

So the guy would just have to type in a text box next to the Canvas, and when he types in the textbox, it would automaticly update the content of the "name" variable, or "address" or "title".

工作？

EDIT

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

我将在此文本框中输入，然后更新：

I would type in this textbox, and then would update :

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到：

"testing" being the ID of my textbox...And I changed the fillText to :

oCtx.fillText(val, 282, 138);

但是当我在文本框中输入内容时，没有什么发生...任何想法为什么？

But nothing's happening when I type in the textbox...any idea why?

推荐答案

一旦您从键向下事件或任何你需要清除画布并重新绘制新的值。

Once you have the new value from the key down event or whatever you then need to clear down the canvas and redraw it.

因此

OCtx.clearRect（x，y，w，h）;

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

//运行最初使用新值

//re run the code you used initially with new value

这篇关于HTML5 Canvas中的文本框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！