己知点坐标和半径R，求每隔45度半径与同心圆交汇的坐标

绘制同心圆坐标

最新推荐文章于 2025-09-07 12:15:11 发布

转载最新推荐文章于 2025-09-07 12:15:11 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzws/p/8824783.html

文章标签：

#xhtml

本文介绍了一个使用JavaScript绘制多个同心圆并计算每隔45度角处坐标的方法。通过一个具体示例展示了如何设置HTML页面，并利用JavaScript计算不同半径下圆周上的坐标点，最后将这些点绘制在页面上。

需求如下图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>javascript己知点坐标和半径R，求每隔45度半径与同心圆交汇的坐标</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        span {
            position: absolute;
            color: red;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <script>
        var showCircle = function () {
            var PI = Math.PI;
            return {
                draw: function (r, _x, _y) {
                    var x, y;
                    var _pt = [];
                    for (var i = 0; i < 360; i += 45) {
                        x = Math.cos(PI / 180 * i) * r + _x;
                        y = Math.sin(PI / 180 * i) * r + _y;
                        var O = document.createElement('span');
                        O.appendChild(document.createTextNode('.'));
                        document.body.appendChild(O);
                        O.style.left = x + 'px';
                        O.style.top = y + 'px';
                        let pt = { x, y };
                        _pt.push(pt);
                    }
                    Points.push(_pt);
                    
                }                
            }
            
        }();
        var Points = [];
        for (let r = 80; r < 200; r+=20){
            showCircle.draw(r, 200, 200);
        }     
        console.log(Points);
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/zzws/p/8824783.html