html - 使用 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 }
];

下面的 draw 方法将从前面的数组中绘制线条，

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();
    }
}