美文网首页
纯js 画圆的方法

纯js 画圆的方法

作者: 买买买买菜 | 来源:发表于2018-05-30 17:39 被阅读19次

1.给了两个点的坐标,怎样求两点连线的中点坐标?

设两个点是(x1,y1),(x2,y2)
那么两点连线的中点坐标是[(x1+x2)/2,(y1+y2)/2]

2.两点之间的距离计算公式?

两点的坐标是(x1,y1)和(x2,y2)
则两点之间的距离公式为 d=√[(x1-x2)²+(y1-y2)²]

3. 正玄值 余弦值 sin cos?

Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间;
Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数;

这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2PI/360角度;
30° 角度 的弧度 = 2PI/36030

4.如何得到圆上每个点的坐标?

根据三角形的正玄、余弦来得值;
假设一个圆的圆心坐标是(a,b),半径为r,
则圆上每个点的X坐标=a + Math.sin(2Math.PI / 360) * r ;Y坐标=b + Math.cos(2Math.PI / 360) * r ;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拖动画圆</title>
</head>

<body>
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }

        #canvas {
            width: 600px;
            height: 500px;
            margin: 20px auto;
            border: 1px solid #00aa00;
            background: #F8F8F8;
            cursor: crosshair;
            position: relative;
        }

        #canvas div {
            position: absolute;
            width: 1px;
            height: 1px;
            font-size: 1px;
            line-height: 1px;
            overflow: hidden;
            background: #f00;
        }
    </style>

    <div id="canvas"></div>

    <script>
        function circle(x, y, r) {

            var html = [],
                radio, xx, yy;
            html.push("<div style='left:" + (x - 2) + "px; top:" + y + "px; width:5px;'></div>");
            html.push("<div style='left:" + x + "px; top:" + (y - 2) + "px; height:5px;'></div>");

            for (var i = 0.0; i < 360; i += 0.5) {
                radio = i * Math.PI / 180;
                xx = r * Math.cos(radio) + x;
                yy = r * Math.sin(radio) + y;
                html.push("<div style='left:" + xx + "px; top:" + yy + "px;'></div>");
            }
            
            return html.join("");
        }

        function Point(x, y) {
            this.x = x || 0;
            this.y = y || 0;
        }

        function getOffset(obj) {
            var x = 0,
                y = 0;
            do {
                x += obj.offsetLeft;
                y += obj.offsetTop;
                obj = obj.offsetParent;
            } while (obj);
            return new Point(x, y);
        }

        window.onload = function () {
            var canvas = document.getElementById("canvas"),
                origin, pt, offset, isClick = false,
                r, neworigin;

            offset = getOffset(canvas);

            canvas.onmousedown = function (oEvent) {
                oEvent = oEvent || event;
                origin = new Point(oEvent.clientX - offset.x, oEvent.clientY - offset.y);
                isClick = true;
            };

            document.onmousemove = function (oEvent) {
                if (!isClick) {
                    return;
                }

                oEvent = oEvent || event;
                pt = new Point(oEvent.clientX - offset.x, oEvent.clientY - offset.y);

                neworigin = new Point((origin.x + (oEvent.clientX - offset.x)) / 2, (origin.y + (oEvent.clientY -
                    offset.y)) / 2);

                r = Math.sqrt((pt.x - neworigin.x) * (pt.x - neworigin.x) + (pt.y - neworigin.y) * (pt.y -
                    neworigin.y));

                canvas.innerHTML = circle(neworigin.x, neworigin.y, r);
            };

            canvas.onmouseup = function () {
                isClick = false;
            };
        };
    </script>
</body>

</html>

相关文章

网友评论

      本文标题:纯js 画圆的方法

      本文链接:https://www.haomeiwen.com/subject/evdxsftx.html