JS画圆

最新推荐文章于 2020-10-09 17:25:56 发布

Cupid510

最新推荐文章于 2020-10-09 17:25:56 发布

阅读量1.4k

点赞数 3

分类专栏： javaScript

本文链接：https://blog.csdn.net/weixin_44283432/article/details/108091776

版权

javaScript 专栏收录该内容

235 篇文章 4 订阅

订阅专栏

js画圆

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 50px;
                height: 50px;
                background-color: pink;
                position: absolute;
            }
            .sp span{
                width: 5px;
                height: 5px;
                background-color: pink;
                position: absolute;
            }
        </style>
        <script>
            window.onload = function(){
                var oBox = document.querySelector(".box");
                var oSpan = document.querySelector("span");
                var r = 100;  //设置半径
                var x = 400 ;  //设置圆点
                var y = 400;
                var angle = 0;   //角度
                setInterval(function(){
                    angle ++;
                    var radian = angle * Math.PI /180;  //弧度
                    var a = Math.sin(radian) * r;   //圆上点的横纵坐标的值 
                    var b = Math.cos(radian) * r;
                    oBox.style.left = x + a + "px";   //运动轨迹
                    oBox.style.top = y-b+"px";  
                    var span = document.createElement("span");  //给运动轨迹添加底色
                    span.style.left = oBox.offsetLeft + "px";
                    span.style.top = oBox.offsetTop + "px";
                    oSpan.appendChild(span);
                },30)
            }
        </script>
    </head>
    <body>
        <div class="box"></div>
        <span class="sp"></span>
    </body>
    </html>

Cupid510

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS画圆

js画圆<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫