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