zoukankan      html  css  js  c++  java
  • JavaScript画圆

    用圆规画圆是分为以下三步
                              1. 确定圆心
                              2. 确定半径
                              3. 顺时针
    用代码画圆:
          
    <!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>
                #div1{
                     100px;
                    height: 100px;
                    background-color: black;
                    position: absolute;
                    
                }
                #div2 div{
                     5px;
                    height: 5px;
                    background-color: black;
                    position: absolute;
                }
            </style>
            <script>
                window.onload = function(){
                    var node = document.getElementById("div1");
                    var node2 = document.getElementById("div2");
    
                    //1、确定圆心
                    var X = 500;
                    var Y = 500;
                    var r = 200;
    
                    var i = 0; //转过的角度
    
                    setInterval(function(){
                        i++;
                        var radian = i * Math.PI / 180;
    
                        //计算当前物体应该在什么位置
    
                        var a = Math.sin(radian) * r;
                        var b = Math.cos(radian) * r;
    
                        node.style.left = X + a + 'px';
                        node.style.top = Y - b + 'px';
    
    
                         //不停创建div放在页面上去显示轨迹
                        var newNode = document.createElement("div");
                        newNode.style.left = node.offsetLeft + 'px';
                        newNode.style.top = node.offsetTop + 'px';
                        node2.appendChild(newNode);
                    }, 30);
                }
    
            </script>
        </head>
        <body>
            <div id = 'div1'></div>
            <div id = 'div2'></div>
        </body>
    </html>
      1弧度 = Math.PI / 180
     
  • 相关阅读:
    杭电2060WA
    杭电2060
    UVa10082 没有通过
    百度笔试题目02
    百度笔试题目01
    Q1002 四则运算
    百度笔试题目
    约瑟夫环 详细的分析
    算法导论03
    汉诺塔01
  • 原文地址:https://www.cnblogs.com/Huskie-/p/13209765.html
Copyright © 2011-2022 走看看