js 繪製數學函數

時間 2019-11-22
原文原文鏈接
<!-- <!doctype html> -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js繪製數學函數</title>
</head>

<body>
    <div id="main" style="border-bottom:solid red 0px;height:100%;width:100%"></div>
</body>

    <script>
        function $(id){return document.getElementById(id)};
        /*
            繪圖對象
            繪圖函數，好比畫點，線，多邊形，圓
            繪圖參數，好比背景顏色，畫筆顏色
        */
        var Plot = {
            container : null , //畫布
            ox : 500 , //原點x
            oy : 300 , //原點y
            baseLineColor : 'black' , //座標軸顏色
            brushColor : 'red' , //畫筆顏色
            brushWeight : 1 , //畫筆粗細

            baseLineX : null , // baseLineX 和 baseLineY 用於座標移位
            baseLineY : null ,

            //初始化方法
            init : function(containerId , ox , oy , baseLineColor , brushColor , brushWeight ){
                if($(containerId)){
                    Plot.container = $(containerId);
                }else{
                    alert('你必須制定一個區域做爲畫布！');
                    return;
                }
                if((typeof ox) == 'number'){
                    Plot.ox = ox ;
                }
                if((typeof oy)== 'number'){
                    Plot.oy = oy ;
                }
                Plot.baseLineColor = baseLineColor ;
                Plot.brushWeight = brushWeight ;
                Plot.brushColor = brushColor ;
                Plot.drawCoordinate();
            },

            //設置原點函數
            setOPoint : function(ox,oy){
                Plot.ox = ox ;
                Plot.oy = oy ;
                Plot.container.removeChild(Plot.baseLineX) ;
                Plot.container.removeChild(Plot.baseLineY) ;
                Plot.drawCoordinate();
            },

            //設置畫筆粗細函數
            setBrushWeight : function(weight){
                Plot.brushWeight = weight ;
            },
            setBrushColor : function(color){
                Plot.brushColor = color ;
            },

            // 畫座標軸
            drawCoordinate : function(){
                var baseLineX = document.createElement('div') ;
                baseLineX.style.position = 'absolute' ;
                baseLineX.style.left = 0 ;
                baseLineX.style.top = Plot.oy ;
                baseLineX.style.fontSize = '1px' ;
                baseLineX.style.height = '1px' ;
                baseLineX.style.width = '100%' ;
                baseLineX.style.overflow = 'hidden' ;
                baseLineX.style.backgroundColor = Plot.baseLineColor ;
                Plot.container.appendChild(baseLineX) ;
                Plot.baseLineX = baseLineX ;

                var baseLineY = document.createElement('div') ;
                baseLineY.style.position = 'absolute' ;
                baseLineY.style.left = Plot.ox ;
                baseLineY.style.top = 0 ;
                baseLineY.style.fontSize = '1px' ;
                baseLineY.style.height = '100%' ;
                baseLineY.style.width = '1px' ;
                baseLineY.style.overflow = 'hidden' ;
                baseLineY.style.backgroundColor = Plot.baseLineColor ;
                Plot.baseLineY = baseLineY ;
                Plot.container.appendChild(baseLineY) ;
            },

            //清理畫布
            clean : function(){
                Plot.container.innerHTML = '' ;
                Plot.drawCoordinate() ;
            },

            //畫點，相對原點
            drawDot : function(x,y){
                var dot = document.createElement('div') ;
                dot.style.left = Plot.ox + x + 'px' ;
                dot.style.top = Plot.oy - y + 'px' ;
                dot.style.height = Plot.brushWeight ;
                dot.style.width = Plot.brushWeight ;
                dot.style.position = 'absolute' ;
                dot.style.fontSize = '1px' ;
                dot.style.backgroundColor = Plot.brushColor ;
                dot.style.overflow = 'hidden' ;
                Plot.container.appendChild(dot) ;
                dot = null ;

            },

            //sin函數，傳入角度
            sin : function(angle){
                for(var i=0 ; i<angle ; i++){
                    Plot.drawDot(i,Math.sin(i/180*Math.PI)*100) ;
                }
            },

            // cos函數，傳入角度
            cos : function(angle){
                for(var i = 0 ; i < angle ; i++){
                    Plot.drawDot(i,Math.cos(i/180*Math.PI)*100)
                }
            },

            //tan函數
            tan : function(){
                for(var i=0 ; i<720 ; i++){
                    if(Math.tan(i/180*Math.PI)*100>Plot.oy){
                        continue ;
                    }
                    Plot.drawDot(i,Math.tan(1/180*Math.PI)*50);
                }
            },

            //畫線 從 (x0,y0) 到 (x1,y1)
            line : function(x0,y0,x1,y1){
                // 豎線
                if((x1-x0)==0){ 
                    for(var i=((y1>y0)?y0:y1) ; i<((y1>y0)?y1:y0); i++ ){
                        Plot.drawDot(x1,i);
                    };
                    return;
                };
                //橫線
                if((y1-y0)==0){
                    for( var i=((x1>x0)?x0:x1); i<((x1>x0)?x1:x0); i++ ){
                        Plot.drawDot(i,y1);
                    };
                    return;
                };
                //斜線
                //K=斜率，直線方程 y=kx + b;
                var k = (y1-y0)/(x1-x0) ;
                if(k<=1){
                    for(var i=((x1>x0) ? x0 : x1); i<((x1>x0) ? x1 : x0 );i++){
                        Plot.drawDot(i,k*i+y1-k*x1);
                    };
                }else{
                    for(var i=((y1>y0)?y0:y1) ; i<((y1>y0)?y1:y0) ; i++){
                        Plot.drawDot((i-y1+k*x1)/k,i) ; 

                    };
                };
                return;
            }, 

            // 畫圓，radius是半徑，（xi,yi）爲圓心
            circle : function(radius,xi,yi){
                if((typeof xi)=='undefined'){
                    xi = 0 ;
                };
                if((typeof yi)=='undefined'){
                    yi = 0 ;
                };
                // 以i爲角度,從0到360
                var i = 0 ;
                while(i<360){
                    var _x0 = Math.sin(i/180*Math.PI)*radius ;
                    var _y0 = Math.cos(i/180*Math.PI)*radius ;
                    var step = radius/100 ; // 使畫出來的圓更圓潤
                    if(1/step > 1){
                        step = 1 ;
                    }else if(1/step < 0.2){
                        step = 0.2 ;
                    }else{
                        step = 1/step ;
                    };
                    Plot.drawDot(_x0+xi,_y0+yi) ;
                    i = i + step ;
                }
            },

            //畫多邊形
            polygon : function(dots){
                if(typeof dots == 'undefined'){
                    alert('你應該指定一些點畫多邊形') ;
                    return ;
                };
                if(dots.constructor != Array){
                    alert('你應該指定一些點畫多邊形') ;
                    return ;
                };
                for(var i = 0 ; i < dots.length-1 ; i++){
                    Plot.line(dots[i].x , dots[i].y , dots[i+1].x , dots[i+1].y);
                    if(i ==1 && dots.length==2){break;}
                };
                Plot.line(dots[0].x, dots[0].y, dots[dots.length-1].x, dots[dots.length-1].y);
            },
        }
    </script>
    
    

    <!-- test -->
    <script>
        Plot.init('main',500, 500,'green','red',1); 
        Plot.sin(720); 
        Plot.setBrushWeight(3); 
        // Plot.cos(720); 
        // Plot.setBrushWeight(2); 
        // Plot.circle(200,100,100); 
        // Plot.setBrushColor('purple'); 
        // Plot.circle(100,100,100); 
        // Plot.setBrushColor('blue'); 
        // Plot.circle(50,100,100); 
        // var t = new Array(); 
        // var dots = new Array(); 
        // dots[0] = {x:-10,y:-10}; 
        // dots[1] = {x:400,y:10}; 
        // dots[2] = {x:400,y:300}; 
        // dots[3] = {x:10,y:300}; 
        // Plot.polygon(dots);  
    </script>
    
</html>