Javascript、绘制小摆线、画布

我也问过类似的问题，一些善良的人试图帮助我，但不幸的是失败了

老师给我布置了一个作业；我将从html表单收集数据，然后使用给定的坐标打印一个tringle。不幸的是，我的代码不起作用，我不知道错误在哪里。有什么想法吗？这是我的第一个JS程序顺便说一句，所以请原谅我的不完美

代码如下：

---

我还有一个问题；有没有更好的办法？不为每个顶点使用分离函数是否更优雅？

查看控制台，您将看到问题

提示：额外的

）

尝试以下操作：

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();
}

---

使用一个函数获取对象中的所有点会更好。如果使用表单，则不必编写

document.getElement..

等。下面是一个示例，我相信这将是一个简洁的解决方案 函数getCoordinates（）{ 返回{ x1：数字（cordinates.x1.值）， y1：数字（cordinates.y1.值）， x2：数字（cordinates.x2.值）， y2：数字（cordinates.y2.值）， x3：数字（cordinates.x3.值）， y3：数字（cordinates.y3.值） } } 函数绘图（）{ 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（）； } }

#画布{
边框：2个实心#666；
}

绘制

是的，作为一名语言初学者。。。非常感谢，你为我节省了很多时间和精力。但是你知道吗？还有别的方法吗？我这样问是出于好奇你可以在codereview SECorrection@Neal上问-它仍然没有绘制。不幸的是没有工作。我用Chrome v.49和IE10测试了它，它工作了。试试JSFIDLE链接，三角形也淹没在表单的顶部，所以你必须滚动到顶部一点才能看到它，我会这样做的。谢谢@Mohsen Heydari！这个很好用，谢谢。@ninigi欢迎您。如果它对你很有效，请投票支持答案并接受答案。

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();
}