來自HTML表格的Javascript變量

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; ">