您的位置: 首页  >  文章  >  傅里叶级数，svg版

傅里叶级数，svg版

分类: 文章 • 2023-11-24 20:30:46

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SVG Hello World</title>
    </head>
    <body>
Fourier series:<button onclick=movetox()> Click Me to Wave...</button> By Gu Laicheng, 14:17 2007-3-9, 2018-11-4,svg
<svg id='glc' xmlns="http://www.w3.org/2000/svg" version="1.1" width="900" height="500">
</svg>

<span id='status'></span>
<script>


//由width:10pt;height:10pt; 控制圆的大小


    var period   = 5;               //周期
    var swing    = 120;             //振幅
    var serials  = 2;               //级数
    var r        = 5;               //点圆半径
    var density  = 5;               //角速度
    var x0       = 80;              //左起
    var y0       = 180;             //中线
    var offset   = 2;               //平移动量
    var speed    = 5;               //平移动速度(s)
                                    
    var pi = Math.PI;               //3.1415926
    var fillcolor   = "#aaffaa";    //小圆填充颜色
    var strokecolor = "#aaffaa";    //小圆边线颜色

    var str = "";
    var aa = 0;
    var a=0;
    
    var gid = document.getElementById("glc");
      var gst = document.getElementById("status");
    var csvg;

// 以下除以3，是为了保持在屏幕上合适地显示5个周期
// 如果周期显示的多，而角速度小，可能造成点的个数太多，影响屏幕显示

    lx = (360 * period)/2.5 ;
    document.write("<v:line id=vml1 style='POSITION:absolute;Z-INDEX:3001;LEFT:"+x0+"px;TOP:"+(y0-swing-40)+"px' from='0,0' to='0,"+(swing*2+80)+"px' strokecolor='#0000DD' strokeweight='1px'/>");
    document.write("<v:line id=vml2 style='POSITION:absolute;Z-INDEX:3003;LEFT:"+x0+"px;TOP:"+y0+"px' from='0,0' to='"+(lx+40)+",0px' strokecolor='#0000DD' strokeweight='1px'/>");

    document.write("<v:line id=vml3 style='POSITION:absolute;Z-INDEX:3005;LEFT:"+x0+"px;TOP:"+(y0-swing)+"px' from='0,0' to='"+lx+",0px' strokecolor='#EEDDDD' strokeweight='1px'/>");
    document.write("<v:line id=vml4 style='POSITION:absolute;Z-INDEX:3006;LEFT:"+x0+"px;TOP:"+(y0+swing)+"px' from='0,0' to='"+lx+",0px' strokecolor='#EEDDDD' strokeweight='1px'/>"); 

    for(var a0=0;a0<=(360 * period);a0=a0+density){
        aa = (a + a0) * pi/180 ;
        kx=x0+a0/2.5;

        ky = y0 ;
        for(i0=0;i0<=serials;i0++) {
            ky = ky - swing * Math.sin((2*i0+1)*aa)/(2*i0+1)
        }
        
        csvg = document.createElementNS('http://www.w3.org/2000/svg','circle'); 

        csvg.setAttribute('id','_glc0'+a0);
        csvg.setAttribute('cx',kx);
        csvg.setAttribute('cy',ky);
        csvg.setAttribute('r',r);
        csvg.setAttribute('stroke',strokecolor);
        csvg.setAttribute('stroke-width','2px');
        csvg.setAttribute('fill',fillcolor);
        gid.appendChild(csvg); 

    }
    document.write(str);

 
 

function movetox() {
    setTimeout("movetox()", speed);
    gst.innerText=""+a+"-"+new Date().toLocaleString();

    for(var a0=0;a0<=(360 * period);a0=a0+density){
        obj2=eval("_glc0"+a0);
        aa = (a + a0) * pi /180;
        yy = y0 ;
        for(i0=0;i0<=serials;i0++) {
            yy = yy - swing * Math.sin((2*i0+1)*aa)/(2*i0+1)
        }
        obj2.setAttribute('cy',yy);
    }
    if(a>=(360 * period)) a = 0;
    a=a+offset;
    //console.log(a,yy);
}

 document.write("<br><br><br>");
 document.write("周期:"            +period        +"<br>")
 document.write("振幅:"            +swing        +"<br>")
 document.write("级数:"            +serials    +"<br>")
 document.write("点圆半径:"        +r            +"<br>")
 document.write("角速度:"        +density    +"<br>")
 document.write("左起:"            +x0            +"<br>")
 document.write("中线:"            +y0            +"<br>")
 document.write("平移动量:"        +offset        +"<br>")
 document.write("平移动速度:"    +speed        +"<br>")

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

傅里叶级数，svg版

 

相关推荐