我是 JavaScript 新手。这是我的老师布置的作业，也是我用 JS 编写的第一个程序。
任务:我必须编写一个表格，在其中给出三 Angular 形的坐标。然后我要用 Canvas 打印三 Angular 形。我正在尝试这样做:
<!doctype html>
<head>
<meta charset "UTF-8” />
<title> JavaScript </title>
<script type="application/javascript">
window.onload = draw;
function draw()
{
var welcome_parra = document.getElementById('form');
var coordinate = document.getElementById('wierzcholekX1')
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.beginPath();
//ctx.moveTo(100,50);
ctx.moveTo(testX1(), testY1());
ctx.lineTo(130, 100);
ctx.lineTo(70, 100);
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fill();
}
function testX1()
{
var welcome_parra = document.getElementById('form');
var coordinate = document.getElementById('wierzcholekX1')
return coordinate.value;
}
function testY1()
{
var welcome_parra = document.getElementById('form');
var coordinate = document.getElementById('wierzcholekY1')
return coordinate.value;
}
/* function write_coordinate()
{
var welcome_parra = document.getElementById('form');
var coordinate = document.getElementById('wierzcholekX1')
welcome_parra.innerHTML = "welcome " + coordinate.value;
}*/
</script>
</head>
<body>
<canvas id="canvas1" width="400" height="300"></canvas>
<p id="form"></p>
<form>
<table>
<tr>
<td> Wierzcholek </td>
<td> Współrzędna X</td>
<td> Współrzędna Y </td>
</tr>
<tr>
<td><label for="name">1</label></td>
<td><input type="text" id="wierzcholekX1" /></td>
<td><input type="text" id="wierzcholekY1"/></td>
</tr>
<tr>
<td><label for="name">2</label></td>
<td><input type="text" id="wierzcholekX2" /></td>
<td><input type="text" id="wierzcholekY2"/></td>
</tr>
<tr>
<td><label for="name">3</label></td>
<td><input type="text" id="wierzcholekX3" /></td>
<td><input type="text" id="wierzcholekY3"/></td>
</tr>
</table>
<input type="button" value="wyślij" onclick="write_coordinate();"/>
</form>
</body>
</html>
我想为每个坐标创建单独的函数。我知道这不是最好的方法，但正如我提到的，这是我的第一次。问题是，当我尝试执行 ctx.moveTo(testX1(),testY1()) 附加坐标后没有任何反应。有什么想法/建议吗？
最佳答案
https://jsfiddle.net/n07engyt/3/
function write_coordinate(){
draw();
}
你把你的函数弄乱了一点，而且从来没有准确地调用过draw()。
关于JavaScript、表单、 Canvas 、绘制三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36437919/