Question

我试图绘制像STAR *这样的东西。

https://jsfiddle.net/jsfiddlefcn/w7y86acz/7/

从中心width / 2和height / 2到bx和by周围的不同点。

var counter = 0;

function linedraw(ax, ay, bx, by) {
  var r = parseInt(Math.random() * 255);
  var g = parseInt(Math.random() * 255);
  var b = parseInt(Math.random() * 255);
  var a = 0.45;
  var caty = Math.abs(ay - by);
  var catx = Math.abs(ax - bx);
  counter++;
  /*
  $("<div id='catx" + counter + "'>").css({ // optional.
    "height": '2px',
    "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
    "width": catx,
    "position": "absolute",
    "top": by,
    "left": Math.min(ax, bx),
    // "transform": "rotate("+rotation+"deg)"
  }).appendTo("#body");
  $("<div id='caty" + counter + "'>").css({ // optional.
    "height": '2px',
    "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
    "width": caty,
    "position": "absolute",
    "top": Math.min(ay, by) + caty / 2,
    "left": bx - caty / 2,
    "transform": "rotate(90deg)"
  }).appendTo("#body");*/
  var width = Math.sqrt(Math.pow(catx, 2) + Math.pow(caty, 2));
  var atan = Math.atan( (ay-by) / (ax - bx) );
  //var acos = Math.acos(caty / width);
  //var asin = Math.asin(catx / width);
  var rotation = atan * 360 / ( 2 * Math.PI );
  //var rotation = acos * 360 / ( 2 * Math.PI );
  //var rotation = asin * 360 / ( 2 * Math.PI );
  var Y = Math.min(ay, by) + caty / 2;
  var X = Math.min(ax, bx);
  $("<div id='diagonal_" + counter + "'>").css({ // Main Line
    "height": '2px',
    "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
    "width": width,
    "position": "absolute",
    "top": Y,
    "left": X,
    "transform": "rotate(" + rotation + "deg)"
  }).appendTo("#body");
}

var height = 500;
var width = 500;
var step = 30;
for (var x = 0; x < width; x += step) {
  for (var y = 0; y < height; y += step) {
    linedraw(width / 2, height / 2, x, y);
  }
}

rotation和Y - 是正确的！

需要通过X轴确定偏移。

可变

"left": X,

所有线条向右移动一点，具体取决于与X轴的角度。比更多的角度 - X轴的UNKNOWN变化越多。

JPEG example

Answer 1

由于您正在使用变换，因此您无需进行任何奇怪的数学运算。唯一的挑战是弄清楚如何设置角度以匹配您的增量。

例如，我已使用以下代码段替换了您的linedraw代码的后半部分：

    var maxX = ax * 2;
    var angleX = bx / maxX * 360;
    $("<div id='diagonal_" + counter + "'>").css({
        "height": '2px',
        "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
        "width": 150,
        "position": "absolute",
        "top": 250 - 150 / 2,
        "left": 250 - 150 / 2,
        "transform": "rotate(" + angleX + "deg)"
    }).appendTo("#body");

这样做决定了每个步骤增加多少角度。这是基于圆是360度的知识计算的。然后你只需将它插入你的新div中即可获得一颗星。

你需要玩中心的位置以及你想要每条线的长度，但毕竟这是你的任务，并不想为你做任何事情： - ）......

这里有一些工作代码：

＆＃13;

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<div id="body"></div>

<script>
    $(document).ready(function() {
        var counter = 0;

        function linedraw(ax, ay, bx, by) {
            var r = parseInt(Math.random() * 255);
            var g = parseInt(Math.random() * 255);
            var b = parseInt(Math.random() * 255);
            var a = 0.45;
            var caty = Math.abs(ay - by);
            var catx = Math.abs(ax - bx);
            counter++;
            $("<div id='catx" + counter + "'>").css({ // good.
                "height": '2px',
                "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
                "width": catx,
                "position": "absolute",
                "top": by,
                "left": Math.min(ax, bx),
                // "transform": "rotate("+rotation+"deg)"
            }).appendTo("#body");
            $("<div id='caty" + counter + "'>").css({ // good.
                "height": '2px',
                "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
                "width": caty,
                "position": "absolute",
                "top": Math.min(ay, by) + caty / 2,
                "left": bx - caty / 2,
                "transform": "rotate(90deg)"
            }).appendTo("#body");
            var maxX = ax * 2;
            var angleX = bx / maxX * 360;
            $("<div id='diagonal_" + counter + "'>").css({
                "height": '2px',
                "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
                "width": 150,
                "position": "absolute",
                "top": 250 - 150 / 2,
                "left": 250 - 150 / 2,
                "transform": "rotate(" + angleX + "deg)"
            }).appendTo("#body");
        }

        var height = 500;
        var width = 500;
        var step = 30;
        for (var x = 0; x < width; x += step) {
            for (var y = 0; y < height; y += step) {
                linedraw(width / 2, height / 2, x, y);
            }
        }
    });
</script>
</body>
</html>

＆＃13;

其他一些评论：

如果你要做一步增量，那么我会确保我用一步而不是部分来达到目标。因此，将您的身高和宽度提高到510（30的倍数）或将步数更改为25（因为500是25的倍数）。

我还会考虑将你正在做的三件事分成单独的函数 - 一个用于垂直线，一个用于水平线，一个用于你的星（对角线）。

Answer 2

来自ru.stackoverflow.com

的@TicTacVengria

通过这种方式计算右移：

if (bx > ax)
  var X = ax - width/2 + catx/2;
  else
  var X = ax - width/2 - catx/2;

确定css对象的X轴移位，javascript

2 个答案: