Переменные Javascript из HTML-формы

Question

Я пытаюсь написать программу, которая рисует треугольник из точек, указанных в форме, которую я создал. Я знаю, что функции рисования, которые я написал, работают, поскольку я проверил и нарисовал треугольники, вставив параметры вручную, однако, когда я попытался нарисовать треугольник из значений в полях, моя функция drawLine2 производит другой результат, чем когда Я вставляю значения вручную. Мне было интересно, не сделал ли я что-то неправильное при присвоении значениям формы переменным Javascript. Любая помощь вообще была бы замечательной.

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 

 
function updateForm() { 
 
    var firstx = document.getElementById("firstx").value; 
 
    var firsty = document.getElementById("firsty").value; 
 
    var secondx = document.getElementById("secondx").value; 
 
    var secondy = document.getElementById("secondy").value; 
 
    var thirdx = document.getElementById("thirdx").value; 
 
    var thirdy = document.getElementById("thirdy").value; 
 
    drawLine2(firstx, firsty, secondx, secondy); 
 
    drawLine2(secondx, secondy, thirdx, thirdy); 
 
    drawLine2(thirdx, thirdy, firstx, firsty); 
 
} 
 

 

 
function drawLine2(orx, ory, dx, dy) { 
 
    var offsetx = 1; 
 
    if (orx - dx > 0) { 
 
    offsetx = -1; 
 
    } 
 
    var offsety = 1; 
 
    if (ory - dy > 0) { 
 
    offsety = -1; 
 
    } 
 
    drawLine(Math.abs(orx - dx), Math.abs(ory - dy), offsetx, offsety, orx, ory); 
 
} 
 

 
function drawLine(x1, y1, ox, oy, orx, ory) { 
 
    var x0 = 0; 
 
    var y0 = 0; 
 
    var dy = y1 - y0; 
 
    var dx = x1 - x0; 
 
    var d = dy - (dx * 0.5); 
 
    var x = x0; 
 
    var y = y0; 
 
    if (Math.abs(dy) > Math.abs(dx)) { 
 
    while (y < y1) { 
 
     drawPixel(x, y, ox, oy, orx, ory); 
 
     y = y + 1; 
 
     if (d < 0) { 
 
     d = d + dx; 
 
     } else { 
 
     x = x + 1; 
 
     d = d + dx - dy; 
 
     } 
 
    } 
 
    } else { 
 
    while (x < x1) { 
 
     drawPixel(x, y, ox, oy, orx, ory); 
 
     x = x + 1; 
 
     if (d < 0) { 
 
     d = d + dy; 
 
     } else { 
 
     y = y + 1; 
 
     d = d + dy - dx; 
 
     } 
 
    } 
 
    } 
 
} 
 

 

 
function drawPixel(x, y, ox, oy, orx, ory) { 
 
    context.fillStyle = "black"; 
 
    context.fillRect((ox * x) + orx, (oy * y) + ory, 1, 1); 
 
}

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<form method="get"> 
 
    First X: <input type="number" max="500" min="0" id="firstx" value="250"> 
 
    <br> First Y: <input type="number" max="500" min="0" id="firsty" value="250"> 
 
    <br> Second X: <input type="number" max="500" min="0" id="secondx" value="0 "> 
 
    <br> Second Y: <input type="number " max="500 " min="0 " id="secondy" value="0 "> 
 
    <br> Third X: <input type="number " max="500 " min="0 " id="thirdx" value="0 "> 
 
    <br> Third Y: <input type="number " max="500 " min="0 " id="thirdy" value="250 "> 
 
    <br> 
 
    <input type="button" onclick="updateForm()" value="Submit "> 
 
</form> 
 
<canvas id="myCanvas" width="500 " height="500 " style="border:1px solid #000000; ">

Answer 1

Врожденная вы работаете со строками. Разбирайте до int, или какой-либо тип номера имеет наибольший смысл.

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 

 
function updateForm() { 
 
    var firstx = parseInt(document.getElementById("firstx").value, 10); 
 
    var firsty = parseInt(document.getElementById("firsty").value, 10); 
 
    var secondx = parseInt(document.getElementById("secondx").value, 10); 
 
    var secondy = parseInt(document.getElementById("secondy").value, 10); 
 
    var thirdx = parseInt(document.getElementById("thirdx").value, 10); 
 
    var thirdy = parseInt(document.getElementById("thirdy").value, 10); 
 
    drawLine2(firstx, firsty, secondx, secondy); 
 
    drawLine2(secondx, secondy, thirdx, thirdy); 
 
    drawLine2(thirdx, thirdy, firstx, firsty); 
 
} 
 

 

 
function drawLine2(orx, ory, dx, dy) { 
 
    var offsetx = 1; 
 
    if (orx - dx > 0) { 
 
    offsetx = -1; 
 
    } 
 
    var offsety = 1; 
 
    if (ory - dy > 0) { 
 
    offsety = -1; 
 
    } 
 
    drawLine(Math.abs(orx - dx), Math.abs(ory - dy), offsetx, offsety, orx, ory); 
 
} 
 

 
function drawLine(x1, y1, ox, oy, orx, ory) { 
 
    var x0 = 0; 
 
    var y0 = 0; 
 
    var dy = y1 - y0; 
 
    var dx = x1 - x0; 
 
    var d = dy - (dx * 0.5); 
 
    var x = x0; 
 
    var y = y0; 
 
    if (Math.abs(dy) > Math.abs(dx)) { 
 
    while (y < y1) { 
 
     drawPixel(x, y, ox, oy, orx, ory); 
 
     y = y + 1; 
 
     if (d < 0) { 
 
     d = d + dx; 
 
     } else { 
 
     x = x + 1; 
 
     d = d + dx - dy; 
 
     } 
 
    } 
 
    } else { 
 
    while (x < x1) { 
 
     drawPixel(x, y, ox, oy, orx, ory); 
 
     x = x + 1; 
 
     if (d < 0) { 
 
     d = d + dy; 
 
     } else { 
 
     y = y + 1; 
 
     d = d + dy - dx; 
 
     } 
 
    } 
 
    } 
 
} 
 

 

 
function drawPixel(x, y, ox, oy, orx, ory) { 
 
    context.fillStyle = "black"; 
 
    context.fillRect((ox * x) + orx, (oy * y) + ory, 1, 1); 
 
}

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
}

<form method="get"> 
 
    First X: <input type="number" max="500" min="0" id="firstx" value="250"> 
 
    <br> First Y: <input type="number" max="500" min="0" id="firsty" value="250"> 
 
    <br> Second X: <input type="number" max="500" min="0" id="secondx" value="0 "> 
 
    <br> Second Y: <input type="number " max="500 " min="0 " id="secondy" value="0 "> 
 
    <br> Third X: <input type="number " max="500 " min="0 " id="thirdx" value="0 "> 
 
    <br> Third Y: <input type="number " max="500 " min="0 " id="thirdy" value="250 "> 
 
    <br> 
 
    <input type="button" onclick="updateForm()" value="Submit "> 
 
</form> 
 
<canvas id="myCanvas" width="500 " height="500 " style="border:1px solid #000000; ">