0
228
ViewsDraw lines and set stacking angles between them
I want to draw a set of lines on a canvas with plain javascript. And I want those lines to be stacked on each other. The tricky thing is, that I want to set an angle between each line and I want the angle to be based on the previous angles. So if line1 has an angle of 15° and line1 one of 15° aswell. line2 should be rotated for 30°.
I made a quick sketch in paint to visualize my description:
I also made a condesandbox and tried it. Each slider should be the angle of one connection point. The first line (red) works just as expected. If you increase the angle, the line is drawn in that angle. But the next lines are not connected at all and I do not know how to fix this.
https://codesandbox.io/s/angled-lines-1p0yz?file=/src/index.js
·
Juan Pablo Isaza
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()" />
·
Juan Pablo Isaza
Report
Answer question