当前位置：文江博客话题详情

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

发布于 2024-12-20 00:39:04 字数 83 浏览 2 评论 0原文

我想

100

从由一组角度和长度（50 和、90 和 20、90 和 30 等..）

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

假情假意假温柔 2024-12-27 00:39:04

这是一个困难的......

例如角度和角度的物体阵列lengths：

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

您可以在画布元素

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

that was a hard one ...

e.g array of objects of angle & lengths:

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

the following draw method will draw the lines from the previous array,

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

you can call the draw after the canvas element

<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:
try changing draw function to this,

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

回复收藏 0 原文

三生殊途 2024-12-27 00:39:04

我遇到了与 Morten J 类似的问题，并尝试了 Shlomi Komemi 的第二个绘图函数，它工作得很好......但仅限于他给出的仅具有 90° 倍数的数组。
然而，如果你尝试 30°，你会发现有些不对劲，因为画的是直角。
我发现这是因为angle和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 年后并不关心......）。

I had a similar problem as Morten J and tried Shlomi Komemi's second draw function and it works fine ... but only for the Array he gave with only multiples of 90°.
However, if you try 30° you will notice that something is wrong because a right angle is drawn.
I figured out that the reason for this is that angle and arr[i].angle are summed up 3 times.
Here is the corrected version of the function:

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

That should work (but I guess the Morten does not care after 3 years...).

回复收藏 0 原文

~没有更多了~