傳遞形式輸入到JavaScript，然後更新帆布

所以，我想在這裏做的是通過從數量型的輸入表中的信息的JavaScript，然後重新繪製更新的變量數據的畫布。傳遞形式輸入到JavaScript，然後更新帆布

這裏是我到目前爲止有：

<!DOCTYPE HTML> 
<html> 
<head> 
<script language = "JavaScript"> 

var canvas; 
var context; 
var _x = 0; 

function draw(newx) { 
context.rect(newx,100,100,100) 
context.strokeStyle = "red" 
context.stroke() 
} 

function sendVal(form) { 
_x = form.xx.value; 
context.clearRect(0,0,canvas.width,canvas.height); 
draw(_x); 
} 

window.onload = function() { 
canvas = document.getElementById("myCanvas"); 
context = canvas.getContext("2d"); 
context.rect(_x,100,100,100); 
context.strokeStyle = "blue"; 
context.stroke(); 
}; 

</script> 

</head> 

<body> 

<FORM NAME="SENDX" ACTION="" METHOD="GET"> 
Enter X: <INPUT TYPE="number" NAME="xx"> 
<INPUT TYPE="submit" VALUE="ENTER CO-ORDINATES" onClick="sendVal(this.form)"> 
</FORM> 

<canvas id="myCanvas" width="500" height="500"></canvas> 

</body> 
</html>

正如你可以在上面看到，我試圖使畫布的上下文變量公開，這樣我可以從JavaScript的的另一部分訪問其功能，但畫布從不更新自身。我該如何解決？謝謝。

來源

2012-01-13 Hamid Sheikh

我覺得你的問題不是在JavaScript，但HTML，類型的輸入「提交」希望引起表單提交事件，你只是想要一個onclick事件。嘗試只用：

<input type="button" value="ENTER CO-ORDINATES" onclick="sendVal(this.form)">

工作的jsfiddle：http://jsfiddle.net/nwellcome/mJyps/5/

來源

2012-01-13 19:44:31 nwellcome

是啊，我想通了這一點，沒有辦法確認輸入的數據。不過謝謝。 – 2012-01-13 21:01:56

傳遞形式輸入到JavaScript，然後更新帆布

回答

相關問題