javascript - 我需要使用坐标数组画线

Question

var canvas_ele = document.getElementById("lineCanvas");
var ctx = canvas_ele.getContext("2d");

var a = [
  [65, 455],
  [232, 357],
  [476, 316],
  [754, 67]
];

ctx.beginPath();
ctx.moveTo(a[0]);
ctx.lineTo(a[1]);
ctx.lineTo(a[2]);
ctx.lineTo(a[3]);
ctx.stroke();

<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

标签： javascripthtml5-canvas

Answer 1

该.moveTo()方法需要两个参数， anx和 a y。目前，您以数组的形式提供一个参数[x, y]。您有几种方法可以解决此问题，一种方法是使用.apply(ctx, a[i]). 另一种更现代的方法是使用扩展语法将数组中的两个元素用作单独的参数：

var canvas_ele = document.getElementById("lineCanvas");
var ctx = canvas_ele.getContext("2d");

var a = [
  [65, 455],
  [232, 357],
  [476, 316],
  [754, 67]
];

ctx.beginPath();
ctx.moveTo.apply(ctx, a[0]); // es5 friendly
ctx.lineTo(...a[1]); // es6+
ctx.lineTo(...a[2]);
ctx.lineTo(...a[3]);
ctx.stroke();

<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>

您可以通过不重复自己并使用 for 循环来循环遍历数组来进一步提高代码质量：

var canvas_ele = document.getElementById("lineCanvas");
var ctx = canvas_ele.getContext("2d");

var a = [
  [65, 455],
  [232, 357],
  [476, 316],
  [754, 67]
];

ctx.beginPath();
for(var i = 0; i < a.length; i++) {
  ctx.lineTo.apply(ctx, a[i]); 
}
ctx.stroke();

<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>