Javascript、Tringle、canvasを描く

Question

私は似たような質問をして、良い魂を助けようとしましたが、残念ながら失敗しました。

私は教師の割り当てを受けました。私は、html形式からデータを収集し、指定された座標を使用してtringleを印刷します。残念ながら私のコードは動作していないので、私は間違いがどこにあるのかわかりません。何か案は？それは私の最初のJSプログラムbtwですので、私の不完全さを実感してください。

ここでは、コードです： https://jsfiddle.net/n07engyt/4/

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(testX2(), testY2()); 
     ctx.lineTo(testX3(), testY3()); 
     //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('wX1') 
     return coordinate.value; 
    } 

    function testX2() 
    { 
     var welcome_parra = document.getElementById('form'); 
     var coordinate = document.getElementById('wX2') 
     return coordinate.value; 
    } 

    function testX3()) 
    { 
     var welcome_parra = document.getElementById('form'); 
     var coordinate = document.getElementById('wX3') 
     return coordinate.value; 
    } 

    function testY1() 
    { 
     var welcome_parra = document.getElementById('form'); 
     var coordinate = document.getElementById('wY1') 
     return coordinate.value; 
    } 

    function testY2() 
    { 
     var welcome_parra = document.getElementById('form'); 
     var coordinate = document.getElementById('wY2') 
     return coordinate.value; 
    } 

    function testY3() 
    { 
     var welcome_parra = document.getElementById('form'); 
     var coordinate = document.getElementById('wY3') 
     return coordinate.value; 
    } 


    function write_coordinate(){ 
     draw(); 
    } 

私はもう一つ質問がありますが、それを行うための良い方法はありますか？各頂点に分離された関数を使用するよりも、よりエレガントになりますか？

Answer 1

は、すべて取得するには一つの機能を使用してオブジェクト内の点はより良いでしょう。あなたはフォームを使用している場合、あなたはdocument.getElement..などここでは一例で記述する必要はありません、私はこれがきちんと解決策になると考えてい

function getCoordinates() { 
 
    return{ 
 
    x1:Number(cordinates.x1.value), 
 
    y1:Number(cordinates.y1.value), 
 
    x2:Number(cordinates.x2.value), 
 
    y2:Number(cordinates.y2.value), 
 
    x3:Number(cordinates.x3.value), 
 
    y3:Number(cordinates.y3.value) 
 
    } 
 
} 
 

 
function draw() { 
 
    var canvas = document.getElementById('canvas'); 
 
    if (canvas.getContext) { 
 
    var ctx = canvas.getContext('2d'); 
 
    var p = getCoordinates(); 
 
    ctx.fillStyle="#A2322E"; 
 
    console.log(p) 
 
    ctx.beginPath(); 
 
    
 
    ctx.moveTo(p["x1"],p["y1"]); 
 
    ctx.lineTo(p["x2"],p["y2"]); 
 
    ctx.lineTo(p["x3"],p["y3"]); 
 
    ctx.closePath(); 
 

 
    ctx.fill(); 
 
    } 
 
}

#canvas{ 
 
    border:2px solid #666; 
 
}

<form name="cordinates"> 
 
    <div> 
 
    <input name="x1" type=text placeholder="x1" value="70"> 
 
    <input name="y1" type=text placeholder="y1" value="50"> 
 
    </div> 
 
    <div> 
 
    <input name="x2" type=text placeholder="x2" value="100"> 
 
    <input name="y2" type=text placeholder="y2" value="75"> 
 
    </div> 
 
    <div> 
 
    <input name="x3" type=text placeholder="x3" value="100"> 
 
    <input name="y3" type=text placeholder="y3" value="25"> 
 
    </div> 
 
</form> 
 
<button onclick="draw()">draw</button><br/> 
 
<canvas id="canvas" width="400" height="400"></canvas>

Answer 2

ルックあなたのコンソールで、あなたは、問題が表示されます...

ヒント：余分な)

Answer 3

はこれを試してみてください：

function draw() 
{ 
    var canvas = document.getElementById("canvas1"); 
    var ctx = canvas.getContext("2d"); 
    ctx.beginPath(); 
    //ctx.moveTo(100,50); 
    ctx.moveTo(getElementValue('wierzcholekX1'), getElementValue('wierzcholekY1')); 
    //ctx.lineTo(130, 100); 
    ctx.lineTo(getElementValue('wierzcholekX2'), getElementValue('wierzcholekY2')); 
    ctx.lineTo(getElementValue('wierzcholekX3'), getElementValue('wierzcholekY3')); 
    //ctx.lineTo(70, 100); 
    ctx.fillStyle = "rgba(0,0,0,1)"; 
    ctx.fill(); 
} 

function getElementValue(inputID) 
{ 
    return document.getElementById(inputID).value; 
} 

function write_coordinate() 
{ 
    draw(); 
} 

JSFiddle link