Canvas - lineTo (x, y) 不生成多于一行

Question

我目前正在学习 HTML5 画布和 Javascript - 我希望这条线随机继续。我知道 moveTo(x,y) 将生成一条线的起点，通常如果我继续堆叠 lineTo(x,y) 它将从最后一条 lineTo(x,y) 停止的位置生成一个新的线段从。我试图让 lineTo(x,y) 使用 var x = Math.random() * window.innerWidth; 选择一个随机坐标和 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();
}

Answer 1

问题是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>

Answer 2

您在代码中所做的是向随机生成的点画一条线，然后从完全相同的点画一条线到完全相同的点——这根本不是一条线！这就是为什么你只看到一个。

您应该在循环之外设置线路的起点，然后在循环内调用lineTo。

另外，一个只迭代一次的循环并不是一个循环！请注意我如何将循环的条件更改为在i < 3 处停止，因此它总共创建了 3 行。根据您要绘制的线数更改此设置：

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

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

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

c.beginPath();
c.moveTo(300, 200);
c.strokeStyle = "red";

for (var i = 0; i < 3; i++) {
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;
  c.lineTo(x, y);
  c.stroke();
}

Answer 3

问题不在于画布，而在于您使用的 for 循环。您的 for 循环将只运行一次，因此只绘制一条线。如果您想绘制多条线而不是增加循环并将 beginpath 和 moveTo 移到它之外。

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 < 5; i++) {
  var x = Math.random() * window.innerWidth;
  var y = Math.random() * window.innerHeight;       
  c.lineTo(x, y);     
  c.strokeStyle = "red";
  c.stroke();
  
}

body {margin:0px;}
canvas {
  border: 3px solid black;
}

<canvas></canvas>