Javascript, tringle çizim, tuval

Question

Ben de benzer bir soru sordum ve bazı iyi ruhlar yardım etmeye çalıştı ama ne yazık ki başarısız oldu.

Öğretmenim tarafından bir ödev verildi; Bir html formundan veri toplamak ve verilen koordinatları kullanarak bir tringle yazdırmak. Maalesef kodum çalışmıyor ve hatanın nerede olduğunu bilmiyorum. Herhangi bir fikir? Bu benim ilk JS programım btw yani kusurumu affedin lütfen. İşte

kod: Bir sorum daha var 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(); 
    } 

; Bunu yapmak için daha iyi bir yolu var mı? Her köşe için ayrılmış işlevi kullanarak daha zarif gibi değil mi?

Answer 1

tüm almak için bir işlevinin kullanılması Bir nesnenin içindeki noktalar daha iyi olurdu. Eğer formları kullanırsanız, document.getElement.. vb İşte bir örnek yazmak zorunda değilsiniz, ben bu düzgün bir çözüm olacağına inanıyorum

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

Bak senin konsolda ve sorunu göreceksiniz ...

İpucu: İlave )

Answer 3

bu deneyin:

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