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中的文本框值

回答

相關問題