用jq画一个圆

用jq画一个圆

css部分

	<style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 200px auto;
            position: relative;
        }
    </style>

html部分

 <div class="box"></div>

js部分

<script>
    var x1 = 250, // 初始化圆心换和半径
        y1 = 0,
        x3 = 250,
        y3 = 250

    // 计算两个点之间的夹角
    const getAngle = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => {
        const dot = x1 * x2 + y1 * y2
        const det = x1 * y2 - y1 * x2
        const angle = Math.atan2(det, dot) / Math.PI * 180
        return (angle + 360) % 360
    }
    // 单击获取当前点击位置
    $('.box').click(function (e) {
        var x2 = e.offsetX
        var y2 = e.offsetY
        draw(x2, y2)
    })
    // 绘制图案
    function draw(x2, y2) {
        $('.box').html('') //清空当前图案
        const angle = Math.ceil(getAngle({
            x: x1 - x3,
            y: y1 - y3,
        }, {
            x: x2 - x3,
            y: y2 - y3,
        }))
        var lineHtmlStr = ''
        for (var i = 0; i < angle; i++) {
            lineHtmlStr += `<div style="position:absolute;border-top: 5px solid red;width:250px;top:247px;left:250px;transform:rotate(${i - 90}deg);transform-origin: 0 50%;z-index:-1"></div>`;
        }
        $(lineHtmlStr).appendTo('.box')
    }
    // 左键按住获取鼠标当前位置
    $('.box').mousedown(function (e) {
        if (e.button == 0) {
            $(this).mousemove(function (e) {
                var x2 = e.offsetX
                var y2 = e.offsetY
                draw(x2, y2)
            })
        }
    }).mouseup(function () {
        $(this).unbind('mousemove')
    })


</script>