0
JavaScriptを初めて使用しています。私の先生から与えられた課題です。それは文字通り私がJSで書く最初のプログラムです。JavaScript、フォーム、キャンバス、ドローイング三角形
タスク：私は三角形の座標を与えるフォームを書く必要があります。それからキャンバスで三角形を印刷します。私はこのようにしようとしています：
<!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（））を実行しようとすると、座標を追加した後に何も起こらないということです。任意のアイデア/提案？
こんにちは、ようこそ！ コードでJSFiddleを作成すると、はるかに簡単になります。 – IdeaMan
'window.onload = draw;' do 'の代わりに関数write_coordinate（）{draw（）;}を実行します。/*他のものはここにある* /} 'ボタンをクリックすると、テキストフィールドに値がある場合、三角形が表示されます。 ' –