JavaScript，表格，画布，绘制三角形

Question

I'm new to JavaScript. 我是JavaScript新手。 It's an assignment given by my teacher and it's literally the first program I am to write in JS. 这是我老师给的作业，实际上是我要用JS编写的第一个程序。

The task: I have to write a form, where I give coordinates of a triangle. 任务：我必须编写一个表格，在其中给出三角形的坐标。 Then I am to print the triangle with canvas. 然后我要用画布打印三角形。 I'm trying to do it like this: 我正在尝试这样做：

<!doctype html>


<head>

    <meta  charset  "UTF-8” />

    <title> JavaScript </title>

    <script type="application/javascript">
    window.onload = draw; 
    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(70, 100);
        ctx.fillStyle = "rgba(0,0,0,1)";
        ctx.fill();
        }

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

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

      /*  function write_coordinate()

    {

        var welcome_parra = document.getElementById('form');
        var coordinate = document.getElementById('wierzcholekX1')
        welcome_parra.innerHTML = "welcome " + coordinate.value;

    }*/

    </script>

</head>

<body>
    <canvas id="canvas1" width="400" height="300"></canvas>

    <p id="form"></p>

    <form>
        <table>
            <tr>
                <td> Wierzcholek </td>
                <td> Współrzędna X</td>
                <td> Współrzędna Y </td>
            </tr>
            <tr>
                <td><label for="name">1</label></td>
                <td><input type="text" id="wierzcholekX1" /></td>
                <td><input type="text" id="wierzcholekY1"/></td>
            </tr>
            <tr>
                <td><label for="name">2</label></td>
                <td><input type="text" id="wierzcholekX2" /></td>
                <td><input type="text" id="wierzcholekY2"/></td>
            </tr>
            <tr>
                <td><label for="name">3</label></td>
                <td><input type="text" id="wierzcholekX3" /></td>
                <td><input type="text" id="wierzcholekY3"/></td>
            </tr>
        </table>
        <input type="button" value="wyślij" onclick="write_coordinate();"/>

        </form>

</body>

</html>

I wanted to create separated functions for each coordinate. 我想为每个坐标创建单独的函数。 I know it's not the best way, but as I mentioned, it's my first time. 我知道这不是最好的方法，但是正如我提到的，这是我第一次。 The problem is that when I try to do ctx.moveTo(testX1(),testY1()) nothing happens after I append the coordinates. 问题是，当我尝试执行ctx.moveTo（testX1（），testY1（））时，附加坐标后没有任何反应。 Any ideas/suggestions? 有什么想法/建议吗？

Answer 1

https://jsfiddle.net/n07engyt/3/ https://jsfiddle.net/n07engyt/3/

function write_coordinate(){
    draw();
}

You messed up your functions a bit and never caller draw() accualy. 您将函数弄乱了一点，从不准确地调用draw（）。

JavaScript，表格，画布，绘制三角形

问题描述

1 个解决方案

解决方案1
1 2016-04-05 22:30:15

JavaScript，表格，画布，绘制三角形

问题描述

1 个解决方案

解决方案1 1 2016-04-05 22:30:15

解决方案1
1 2016-04-05 22:30:15