0
Я новичок в JavaScript. Это задание, данное моим учителем, и это буквально первая программа, которую я должен написать в JS.JavaScript, форма, canvas, draw triangle
Задача: Мне нужно написать форму, где я даю координаты треугольника. Затем я должен напечатать треугольник с холстом. Я пытаюсь сделать это вот так:
<!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 'function write_coordinate() {draw();/* другие вещи здесь * /} 'Если при нажатии на кнопку у вас есть значения в текстовых полях, вы увидите, как появляется ваш треугольник. '. –