Question

我想画这样的折线

enter image description here

由一组角度和长度组成的数组（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元素

之后调用draw

<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>

编辑：尝试将绘图功能更改为此，

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

我遇到了与Morten J类似的问题，并尝试了Shlomi Komemi的第二次绘制功能，它工作正常......但仅限于他给出的阵列只有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();
    }
}

这应该有效（但我想Morten在3年后并不关心......）。

使用HTML画布绘制一系列旋转线条

2 个答案: