js画了一个椭圆

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
          /*
     * Draw a Oval
     * The following is the formula of Oval.
     * All dots is drawn by it.
     * x = r*a*cosθ (0 <= θ <= 2π)
     * y = r*b*sinθ (0 <= θ <= 2π)
     * b*b + r*r = a*a //Pythagoras Theorem
     */
    var Circle = {
        centre_of_circle : {x:200,y:200},
        radius : 12,
        dot : function(x,y,w){
            return "<div id=‘dot_"+x+y+"‘ style=‘display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px‘></div>";
        },
        draw : function(){
            var s = "",
                dots = 500,
                a = 15,
                b = 9,
                dotsArr = [];
            for(var i = 0; i < dots; i++){
                var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a;
                var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*Math.PI/dots)*b;
                s += Circle.dot(x, y, 2);
                dotsArr.push({"y":y,"x":x});
            }
            document.body.innerHTML = s;
            return dotsArr;
        }
    }
    window.onload = function(){
        var dots = Circle.draw();
        var count = 0;
        var t = window.setInterval(function(){
           document.getElementById("dot_"+dots[count].x+dots[count].y).style.display = "block";
           count++;
           if(count >= dots.length) window.clearInterval(t);
        },1);
    }
</script>
</head>

<body>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
    /*
     * Draw a Oval
     * The following is the formula of Oval.
     * All dots is drawn by it.
     * x = r*a*cosθ (0 <= θ <= 2π)
     * y = r*b*sinθ (0 <= θ <= 2π)
     * b*b + r*r = a*a //Pythagoras Theorem
     */
    var Circle = {
        centre_of_circle : {x:200,y:200},
        radius : 12,
        dot : function(x,y,w){
            return "<div id=‘dot_"+x+y+"‘ style=‘display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px‘></div>";
        },
        draw : function(){
            var dots = 300,
                a = 15,
                b = 9,
                dotsArr = [];
            for(var i = 0; i < dots; i++){
                var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a;
                var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*Math.PI/dots)*b;
                dotsArr.push({"y":y,"x":x});
            }
            return dotsArr;
        },
        words : function(aObjArr){
            var s = "";
            s += "<a href=‘"+aObjArr.href+"‘ target=‘_blank‘ style=‘position:absolute;‘ id=‘a_"+aObjArr.id+"‘>"+aObjArr.str+"</a>";
            return s;
        }
    }
    window.onload = function(){
        var dots = Circle.draw();
        var count = 0;
        document.body.innerHTML = Circle.words({href:"http://www.baidu.com",id:dots[count].x+""+dots[count].y,str:"baidu"});
        var style = document.getElementById("a_"+dots[count].x+""+dots[count].y).style;
        var t = window.setInterval(function(){
           with(style){
               top = dots[count].y+"px";
               left = dots[count].x+"px";
               fontSize = (dots[count].y/10)+"px"
           }
           count++;
           if(count >= dots.length){
               count = 0;
           }
        },1);
    }
</script>
</head>  

<body>
</body>
</html>  
时间: 2025-01-12 07:27:05

js画了一个椭圆的相关文章

Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect{    CGContextRef context = UIGraphicsGetCurrentContext();         /*NO.1画一条线     CGContex

用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这

js Array的一个函数indexOf( )

js Array的一个函数:indexOf(i) var  a = [1,2,3,4]; a.indexOf(2) 返回-1则表示2不在a中,反之则2为a的一个元素 此方法可以用来删除掉Array中的重复元素

js如何判断一个元素是否获得焦点

js如何判断一个元素是否获得焦点:可能在实际应用中需求不多,也或许使用以下方式判断过于直白,不过原理总是那么回事,下面就是一个简单的判断元素是否获得焦点的例子,代码如下: $("#theid").click(function(){ var act = document.activeElement.id; if(act=="theid" ){ alert("获取焦点了"); } else{ alert("没有获取焦点"); }

一行JS代码屏蔽一个网站的访问

<!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><meta http-equiv="Content-Typ

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

无聊js画了个菱形

function repeat(str, count) { return count < 0 ? '' : (new Array(count)).join(str); } function diamond(sign, size) { var d, s = '' for (var i = 0; i < size*2; i++) { d = Math.abs(size-i-1); console.log(d+1, 2*(size-d)); s += repeat(' ', d+1) + repea

用JS画斐波那契螺旋线(黄金螺旋线)

偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FibonacciSequence</title> </head> <body> <

给js创建的一个input数组绑定click事件

</pre><pre name="code" class="javascript"><html> <body> <input type="button" name="input[]" value="按钮1" /><br /> <input type="button" name="input[]&quo