Ich versuche, Linien gemäß den Koordinaten im Array points zu zeichnen, aber es zeigt mir den folgenden Fehler in der Linie, wenn ich diese Methode aufrufe. Wenn ich z.B. console.log (Punkte [1] [1]) zeigt mir das Element. Könnte jemand darauf hinweisen, was ich hier vermisse?

"Ungefangener TypeError: Eigenschaft '0' von undefined kann nicht gelesen werden"

Hier ist mein Code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var points = [[50, 50], [50, 100], [25, 120],
             [100, 50], [70, 90], [100, 90], [70, 120]];

function drawPoints(array) {
    ctx.beginPath();
    ctx.moveTo(array[0][0], array[0][1]);
    for (var i = 1; i <= array.length; i++) {
        ctx.lineTo(array[i][0], array[i][1]);
    }
    ctx.stroke();
}

drawPoints(points);
0
EagleCanFly 22 Feb. 2020 im 14:09

3 Antworten

Beste Antwort

Versuche dies:

 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>


    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var points = [[50, 50], [50, 100], [25, 120],
            [100, 50], [70, 90], [100, 90], [70, 120]];

        drawPoints(points);

        function drawPoints(array) {

            ctx.beginPath();
            ctx.moveTo(array[0][0], array[0][1]);
            for (var i = 1; i < array.length; i++) {
                console.log("Value", array[i][0]);
                ctx.lineTo(array[i][0], array[i][1]);
            }
            ctx.stroke();
        }

    </script>
0
corsaro 22 Feb. 2020 im 11:27

In JavaScript basieren Array-Indizes auf Null. Das heißt, der Index des ersten Elements ist 0, während der Index des letzten Elements array.length - 1 ist.

Das Problem ist, dass Ihre for-Schleife bis array.length iteriert und bei der letzten Iteration einen Fehler auslöst.

Um es zu lösen, ändern Sie Ihre Schleife in:

for (var i = 1; i < array.length; i++) { /*...*/ }

Oder, noch besser, Sie können mit ES6-Dingen etwas Ähnliches tun:

for (const elem of array.slice(1)) {
    ctx.lineTo(...elem);
}
0
FZs 22 Feb. 2020 im 11:44

Bitte überprüfen Sie diesen Code, ich habe diesen aktualisiert:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var points = [[50, 50], [50, 100], [25, 120],
             [100, 50], [70, 90], [100, 90], [70, 120]];

function drawPoints(array) {
    ctx.beginPath();
    ctx.moveTo(array[0][0], array[0][1]);
    for (var i = 1; i < array.length; i++) {   // issue was here.
        ctx.lineTo(array[i][0], array[i][1]);
    }
    ctx.stroke();
}

drawPoints(points);
1
Mayur Agarwal 22 Feb. 2020 im 11:38