Нарисуйте серию повернутых линий с помощью HTML canvas

Question

Я хочу нарисовать ломаную линию вот так

из массива, состоящего из наборов углов и длин (50 и 100, 90 и 20, 90 и 30 и т.д.

Есть идеи?

Answer 1

это было трудно ...

например, массив объектов угла и длины:

var arr = [
    { angle: 0, h: 50 },
    { angle: 90, h: 60 },
    { angle: 180, h: 70 },
    { angle: 270, h: 80 },
    { angle: 180, h: 90 }
];

следующий метод рисования будет рисовать линии из предыдущего массива,

function getAngle(ctx, x, y, angle, h) {
    var radians = angle * (Math.PI / 180);
    return { x: x + h * Math.cos(radians), y: y + h * Math.sin(radians) };
}
function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();

        var pos = { x: 400, y: 400 };

        for (var i = 0; i < arr.length; i++) {
            ctx.moveTo(pos.x, pos.y);
            pos = getAngle(ctx, pos.x, pos.y, arr[i].angle, arr[i].h);
            ctx.lineTo(pos.x, pos.y);
        }
        ctx.stroke();
    }
}

Вы можете вызвать рисование после элемента canvas

<div style="width:800px;height:800px;border:solid 1px red;">
    <canvas id="canvas" width="800" height="800"></canvas>
</div>
<script type="text/javascript">
    draw();
</script>

EDIT: попробуйте изменить функцию рисования на эту,

function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();

        var pos = { x: 400, y: 400 },
            angle = 0;

        for (var i = 0; i < arr.length; i++) {

            angle += arr[i].angle;
            angle = (arr[i].angle + angle) % 360;

            ctx.moveTo(pos.x, pos.y);
            pos = getAngle(ctx, pos.x, pos.y, arr[i].angle + angle, arr[i].h);
            ctx.lineTo(pos.x, pos.y);
        }
        ctx.stroke();
    }
}

Answer 2

У меня была такая же проблема, как у Мортена Дж, и я попробовал вторую функцию рисования Шломи Комеми, и она отлично работает ... но только для массива, который он дал, с кратностью 90 °. Однако, если вы попробуете 30 °, вы заметите, что что-то не так, потому что нарисован прямой угол. Я понял, что причина этого в том, что угол и arr [i] .angle суммируются 3 раза. Вот исправленная версия функции:

function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();

        var pos = { x: 400, y: 400 },
        angle = 0;

        for (var i = 0; i < arr.length; i++) {

            angle = (arr[i].angle + angle) % 360;

            ctx.moveTo(pos.x, pos.y);
            pos = getAngle(ctx, pos.x, pos.y, angle, arr[i].h);
            ctx.lineTo(pos.x, pos.y);
        }
        ctx.stroke();
    }
}

Это должно сработать (но, думаю, Мортену все равно после 3 лет ...).