js 绘制数学函数

<!-- <!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>

原理:就是用1px*1px的点来画线和面

注意:文件的头部<!doctype html>必须被注释掉

效果图:

时间: 2024-10-14 00:19:48

js 绘制数学函数的相关文章

JS 基本函数 数学函数

取随机数:var rand = Math.random();    ←有括号的是函数,没括号的是属性 时间对象:var time = new Date(); 获取年份:var year = time.getFullYear();   ←获取当年年份 获取月份:var month = time.getMonth() + 1;   月份后面一定要+1才是当月 获取几号:var today = time.getDate();       ←获取日期几号 获取星期几:var day = time.get

Windows下绘制数学函数图像的方法

一.安装相关软件 在Windows中安装VirtualBox: 在VirtualBox中安装Ubuntu Server: 在Ubuntu Server中安装cifs-utils:sudo apt-get install cifs-utils: 在Ubuntu Server中安装Octave:sudo apt-get install octave transfig epstool. 二.在Windows和Ubuntu Server之间建立共享目录 在Windows中共享一个share文件夹,网络权

JS对于字符串、时间日期、数学函数的操作以及常用事件的使用(组织事件冒泡)

一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4);      -从索引3开始截取,截取4位.索引从0开始. 4.将字符串按指定的字符拆开: s.split(",");             引号内放指定的字符.返回的是一个数组. 5.字符串长度: s.length; 6.字符串中一个字符的索引: s.indexOf("world");      worl

利用d3.js绘制雷达图

利用d3,js将数据可视化,可以做到数据与代码的分离,方便以后修改数据. 这次利用d3.js绘制了一个五维的雷达图,即将多个对象的五种属性在一张图上对比. 数据写入data.csv.数据类型写入type.csv文件. 效果如下图所示 源码连接:http://download.csdn.net/detail/svap1/7358123 使用是只需调用 radar()函数即可,如下是测试页面代码. <!DOCTYPE html> <html> <head> <meta

js中的函数,Date对象,Math对象和数组对象

函数就是完成某个功能的一组语句,js中的函数由关键字 function + 函数名 + 一组参数定义;函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可以使代码的组织结构更多清晰. 其语法结构为 function funName (arg0, arg1, … argN){        //statements    } function say_hello (name, msg){ alert(“hello”+ name + “:”+ msg); } say_hello(“d

Matalab绘图与数学函数运算

目录 1.基本常识及命令 2.绘图命令fplot() 3.绘图命令plot() 4.绘图命令ezplot() 5.极限 6.求导与微分 1.基本常识及命令 数字量 format short 短格式,也是系统默认格式,显示小数点后4位的内容 format long 长格式,显示15位有效数字 format short e  短格式e方式,对非整数值都按e方式显示,显示5位有效数字 format long e 长格式e方式,对非整数值都按e方式显示,显示5位有效数字 常量pi为圆周率 字符量 chr

【前端小小白的学习之路】----&gt;用JS编写一个函数,返回数组中重复出现过的元素

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

js中一些函数(一)【丫头, 今天去哪儿了呢,好些没有】

Math.Rondom()   ==>  0 到 1 之间的小数 Math.floor(x)  ==>  小于或者等于 x 的整数(即转换成整数后是不能比 x 大的整数) setInterval(hanshu,1000)  ==>  意思为调用下面的 hanshu(), 间隔时间为 1000 ms(毫秒) js中一些函数(一)[丫头, 今天去哪儿了呢,好些没有],码迷,mamicode.com

Java语言程序设计(基础篇) 第四章 数学函数、字符和字符串

第四章 数学函数.字符和字符串 4.2 常用数学函数 方法分三类:三角函数方法(trigonometric method).指数函数方法(exponent method)和服务方法(service method) 4.4 String类型 String类型不是基本类型,而是引用类型(reference type).