绘制线条并设置它们之间的堆叠角度

Question

我想用 javascript 在 canvas 上画一组线条。我希望这些线相互堆叠。棘手的是，我想在每条线之间设置一个角度，并且我希望该角度基于之前的角度。因此，如果 line1 的角度为 15°，而 line1 的角度也为 15°。 line2应该旋转30°

我用油漆快速画了一个草图来可视化我的描述：

我也做了个condesandbox试了一下。每个滑块应该是一个连接点的角度。第一行（红色）按预期工作。如果增加角度，则以该角度绘制线。但是下一行根本没有连接，我不知道如何解决这个问题。 https://codesandbox.io/s/angled-lines-1p0yz?file=/src/index.js

Answer 1

const ctx = canvas.getContext('2d');
const lines = ['red', 'yellow', 'green', 'blue'];
const start = [100, 75];
const lineLength = 30;

function draw() {
  ctx.clearRect(0,0,canvas.width, canvas.height);
  let prev = start;
  for(let i = 0; i < lines.length; i++) {
    const angle = Math.PI * document.getElementById(`angle${i}`).value / 180;
    const next = [prev[0] + lineLength * Math.sin(angle), prev[1] - lineLength * Math.cos(angle)];
    ctx.beginPath();
    ctx.moveTo(...prev);
    ctx.strokeStyle = lines[i];
    ctx.lineTo(...next);
    prev = next;
    ctx.stroke();
    ctx.closePath();
  }
}

draw();

<canvas id=canvas width="200" height="150"></canvas>
<br/>
<input id=angle0 type=range value=45 min=0 max=360 oninput="draw()" />
<input id=angle1 type=range value=135 min=0 max=360 oninput="draw()" />
<input id=angle2 type=range value=225 min=0 max=360 oninput="draw()" />
<input id=angle3 type=range value=315 min=0 max=360 oninput="draw()" />

绘制线条并设置它们之间的堆叠角度

Draw lines and set stacking angles between them

javascript

drawing

2d

canvas