Question

我对这一切都不熟悉，似乎无法弄清楚如何制作一个for循环（如果可能的话），它将绘制我正在寻找的行类型。我试图用帆布创建一个南瓜的图像，并想要勾勒出牙齿。我希望有一种比输入所有代码更简单的方法来绘制轮廓牙齿所需的各条线。这是每个单独行的代码，但我似乎无法弄清楚for循环会做同样的事情。任何帮助将不胜感激。感谢。

context.beginPath();
context.strokeStyle = '#cc5200';
context.moveTo(220, 590);
context.lineTo(220, 550);
context.moveTo(220, 550);
context.lineTo(260, 550);
context.moveTo(260, 550);
context.lineTo(260, 590);
context.moveTo(260, 590);
context.lineTo(300, 590);
context.moveTo(300, 590);
context.lineTo(300, 550);
context.moveTo(300, 550);
context.lineTo(340, 550);
context.moveTo(340, 550);
context.lineTo(340, 590);
context.moveTo(340, 590);
context.lineTo(380, 590);
context.moveTo(380, 590);
context.lineTo(380, 550);
context.moveTo(380, 550);
context.lineTo(420, 550);
context.moveTo(420, 550);
context.lineTo(420, 590);
context.moveTo(420, 590);
context.lineTo(460, 590);
context.moveTo(460, 590);
context.lineTo(460, 550);
context.moveTo(460, 550);
context.lineTo(500, 550);
context.moveTo(500, 550);
context.lineTo(500, 590);
context.moveTo(500, 590);
context.lineTo(540, 590);
context.moveTo(540, 590);
context.lineTo(540, 550);
context.moveTo(540, 550);
context.lineTo(580, 550);
context.lineTo(580, 590);

context.stroke();

Answer 1

这应该是一个开始：

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.strokeStyle = '#cc5200';

// Example line that is repeated in the loop
context.moveTo(10, 90);      // Bottom left
context.lineTo(10, 50);      // Up
context.lineTo(10 + 40, 50); // Right
context.lineTo(10 + 40, 90); // Down
context.lineTo(10 + 80, 90); // Right

context.moveTo(220, 90);
for (var i = 220; i <= 540; i += 80) {
  context.lineTo(i, 90);
  context.lineTo(i, 50);
  context.lineTo(i + 40, 50);
  context.lineTo(i + 40, 90);
  if(i != 540) // Don't draw the line for the last one
    context.lineTo(i + 80, 90);
}


context.stroke();

＆＃13;

<canvas id="canvas" width="600" height="600"></canvas>

＆＃13;

除了x之外的{p> 580值，您似乎为每个x坐标绘制了2行，相隔40个像素。这些步骤可以循环使用。

画布的绘制线条

1 个答案: