Javascript, Zeichnen eines tringle, Leinwand

Question

Ich habe ähnliche Frage gestellt und einige gute Seelen versucht zu helfen, aber leider gescheitert.

Ich wurde von meinem Lehrer beauftragt; Ich sammle Daten aus einem HTML-Formular und drucke dann einen tringle mit den angegebenen Koordinaten. Leider funktioniert mein Code nicht und ich weiß nicht, wo der Fehler liegt. Irgendwelche Ideen? Es ist mein erstes JS-Programm, also bitte entschuldige meine Unvollkommenheit.

Hier ist der Code: 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(); 
    } 

ich noch eine Frage; Gibt es einen besseren Weg, es zu tun? Wie eleganter, nicht durch getrennte Funktionen für jeden Knoten?

Answer 1

Mit einer Funktion alle erhalten Die Punkte in einem Objekt wären besser. Wenn Sie Formulare verwenden, müssen Sie nicht schreiben document.getElement.. usw. Hier ist ein Beispiel, ich glaube, das eine saubere Lösung

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

Schauen Sie in Ihre Konsole und Sie erhalten die Ausgabe ...

Hinweis sehen: extra )

Answer 3

Versuchen Sie folgendes:

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