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更有效。

总之，它看起来像这样：

＆＃13;

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();

＆＃13;

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

＆＃13;

<canvas></canvas>

＆＃13;

Answer 2

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

＆＃13;

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();
  
}

＆＃13;

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

＆＃13;

<canvas></canvas>

＆＃13;

Answer 3

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

您应该在循环之外设置行的原点，然后在循环内单击一次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();
}

画布 - lineTo（x，y）不会产生更多的那一行

3 个答案: