提问者:小点点

我需要用坐标数组画线


null

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>

null


共1个答案

匿名用户

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

null

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>