Question

我问了类似的问题，一些好心灵试图提供帮助，但不幸的是失败了。

我的老师给了我一份任务;我将从html表单中收集数据，然后使用给定的坐标打印tringle。不幸的是我的代码没有用，我也不知道错误在哪里。有任何想法吗？这是我的第一个JS程序，所以请原谅我的不完美。

    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

Javascript，画一个tringle，画布

3 个答案: