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