javascript画圆和椭圆

最新推荐文章于 2024-06-05 16:38:00 发布

转载最新推荐文章于 2024-06-05 16:38:00 发布 · 1.5k 阅读

文章标签：

#javascript #function #html #date #class #div

本文介绍了一个使用纯JavaScript实现的简单绘图方法，该方法能够在网页上绘制圆形和椭圆形。通过数学公式计算出图形上的点，并用HTML元素进行标记，实现了基本的矢量图形绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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);