0
220
ViewsDibujar líneas y establecer ángulos de apilamiento entre ellas
Quiero dibujar un conjunto de líneas en un lienzo con javascript simple. Y quiero que esas líneas se apilen unas sobre otras. Lo complicado es que quiero establecer un ángulo entre cada línea y quiero que el ángulo se base en los ángulos anteriores. Entonces, si la línea 1 tiene un ángulo de 15° y la línea 1 también de 15°. line2 debe girarse 30°.
Hice un boceto rápido en pintura para visualizar mi descripción: 
También hice un condesandbox y lo probé. Cada control deslizante debe ser el ángulo de un punto de conexión. La primera línea (roja) funciona como se esperaba. Si aumenta el ángulo, la línea se dibuja en ese ángulo. Pero las siguientes líneas no están conectadas en absoluto y no sé cómo solucionarlo. https://codesandbox.io/s/angled-lines-1p0yz?file=/src/index.js 
1 answers
Answer question0
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()" />