javascript - Canvas -lineTo(x，y)不会产生多于一行

我目前正在学习HTML5画布和Javascript-我希望这行继续随机进行。我知道moveTo（x，y）会生成一条线的起点，通常，如果我继续堆叠lineTo（x，y），它将生成一个新的线段，该线段将从上一个lineTo（x，y）停止的地方开始从。我试图使用var x = Math.random（）* window.innerWidth;使lineTo（x，y）选择一个随机坐标。和var y = Math.random（）* window.innerHeight;。它不符合我的假设。

有人知道我可以创建更多随机生成的线段的方法吗？ CodePen Here

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

for (var i = 0; i < 1; i++) {
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;

  c.beginPath();
  c.moveTo(300, 200);
  c.lineTo(x, y);
  c.lineTo(x, y);
  c.strokeStyle = "red";
  c.stroke();
}

最佳答案

问题是您在for循环中有这两行：

c.beginPath();
c.moveTo(300, 200);

这是从每次迭代的相同起点开始一条新路径，而不是继续前一条。

要修复此问题，请将其从for移到它之前。

另外，我建议您在其后再移动另外两行：

c.strokeStyle = 'red';
c.stroke();

创建具有多个点/线的路径并一次绘制所有点/线比调用每个点的stroke效率更高。

总之，它看起来像这样：

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');

c.beginPath();
c.moveTo(300, 200);

for (var i = 0; i < 10; i++) {
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;

  c.lineTo(x, y);
}

c.strokeStyle = 'red';
c.stroke();

body {
  margin: 0;
}

canvas {
  position: fixed;
  top 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<canvas></canvas>

关于javascript - Canvas -lineTo(x，y)不会产生多于一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45067659/