lineTo() 方法不接受数组元素

Question

我正试图根据points'数组中的坐标绘制线，但当我调用此方法时，它显示了以下错误。当我写console.log(points[1][1](时，它会向我显示元素。有人能指出我在这里错过了什么吗？

"未捕获类型错误：无法读取未定义的的属性'0'">

这是我的代码：

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

Answer 1

请检查下面的代码，我已经更新了这个：

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

Answer 2

试试这个：

<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>

Answer 3

在JavaScript中，数组索引是从零开始的。也就是说，第一个元素的索引是0，而最后一个元素的指数是array.length - 1。

问题是for循环迭代到array.length，并且在最后一次迭代时会抛出错误。

要解决此问题，请将您的循环更改为：

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

或者，更好的是，你可以用ES6做一些类似的事情：

for (const elem of array.slice(1)) {
ctx.lineTo(...elem);
}