将表单输入传递给javascript，然后更新canvas

Question

因此，我在这里要做的是将信息从数字类型的输入形式传递给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的另一部分访问其功能，但是画布从不更新自身。 我该如何解决？ 谢谢。

Answer 1

我认为您的问题不在JavaScript中，而在HTML中，“ submit”类型的输入要引起表单提交事件，而您只需要一个onclick事件。 尝试仅使用：

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

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

将表单输入传递给javascript，然后更新canvas

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-01-13 19:44:31

将表单输入传递给javascript，然后更新canvas

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-01-13 19:44:31

解决方案1
0 已采纳 2012-01-13 19:44:31