javascript画圆和椭圆

来源：互联网发布：淘宝权和55开闹翻编辑：程序博客网时间：2024/04/29 20:31

<html>
<head><title></title></head>
<body>
<style type="text/css">
.dp {position:absolute; width:1px; height:1px; overflow:hidden; background-color:#666666}
</style>
<script language="javascript">

// Author:张郎 winer_n
function drawOval(x, y, a, b)
{
    if(arguments.length == 3)
    {
        return drawOval(x, y, a, a);
    }
    var i, j;
    var tpos = [];
    var x1, x2, y1, y2;
    var html = "";
    for(i = 0; i <= a; i++)
    {
        j = Math.floor(Math.sqrt(b*b - b*b*i*i/(a*a))+0.5);
        x1 = i+x;
        x2 = -i+x;
        y1 = j+y;
        y2 = -j+y;
        if(!tpos[x1*1000+y1])
        {
            drawPos(x1,y1);
            drawPos(x1,y2);
            drawPos(x2,y1);
            drawPos(x2,y2);
            tpos[x1*1000+y1] = true;
        }
    }
    for(i = 0; i <= b; i++)
    {
        j = Math.floor(Math.sqrt(a*a - a*a*i*i/(b*b))+0.5);
        x1 = j+x;
        x2 = -j+x;
        y1 = i+y;
        y2 = -i+y;
        if(!tpos[x1*1000+y1])
        {
            drawPos(x1,y1);
            drawPos(x1,y2);
            drawPos(x2,y1);
            drawPos(x2,y2);
            tpos[x1*1000+y1] = true;
        }
    }
    document.write(html);

    function drawPos(x, y)
    {
        html += "<div class='dp' style='left:" + x + "px; top:" + y + "px;'></div>";
    }

}

var t = new Date();
drawOval(200, 200, 100); // 圆
drawOval(300, 300, 200, 100); // 椭圆
alert(new Date() - t);

</script>
</body>
</html>