纯JS绘制数学函数

最新推荐文章于 2021-06-10 13:10:41 发布
最新推荐文章于 2021-06-10 13:10:41 发布
阅读量884 收藏 1
点赞数 1

今天闲来无事用js写了个数学绘图包，还不算完整，不过总出现了雏形。
绘图对象Plot，包含了JS画点，JS画线，JS画正弦sin，JS画余弦cos，tan，圆，多边形。
可设置原点位置，画笔颜色，画笔粗细，坐标线颜色。
其实原理很简单，用长1px宽1px的div模拟点，由点及线，由线及面。

贴上来权当相互学习，以免JS新手觉得js画图是多神秘的事情。

<html> 
  <head> 
  <title>JS绘制数学函数图</title> 
  <style type="text/css">
    body{
      margin: 0px;
      padding: 0px;
    }
  </style> 
	<script>
  	//辅助函数
    function $(id){return document.getElementById(id)};
    /**
  	* 绘图对象
  	* 包含各个绘图函数，比如画点，线段，多边形，圆等
  	* 和一些绘图参数，比如背景颜色，画笔颜色
    **/
    var Plot = {
    	//画布，所有被画出来的元素都append到这个container
      container: null,
      //原点x
      ox: 500,
      //原点y
      oy: 300,
      //坐标颜色
      baseLineColor: 'black',
      //画笔颜色
      brushColor: 'red',
      //画笔粗细
      brushWeight: 1,
      //baseLineX，baseLineY保存坐标线，用于坐标移位
      baseLineX: null,
      baseLineY: null,
      
      //初始化方法，设置画布，原点位置，坐标线颜色，画笔颜色，画笔粗细
      init: function(containerId, ox, oy, baseLineColor,brushColor,brushWeight){
        if($(containerId)){
          Plot.container = $(containerId);
        }
        else{
          alert('You should specify an element in which you can draw plot!');
          return;
        }
        if((typeof ox)=='number'){
          Plot.ox = ox;
        }
        if((typeof oy)=='number'){
          Plot.oy = oy;
        }
        Plot.baseLineColor = baseLineColor;
        Plot.brushColor = brushColor;
        Plot.brushWeight = brushWeight;
        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函数曲线，传入角度，比如90，180，360
      sin: function(angle){
        for(var i=0; i<angle; i++){
          Plot.drawDot(i,Math.sin(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(i/180*Math.PI)*50 );
        }
      },
      //cos函数曲线，传入角度，比如90，180，360
      cos: function(angle){
        for(var i=0; i<angle; i++){
          Plot.drawDot(i,Math.cos(i/180*Math.PI)*100);
        }
      },
      //画线从(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('you should specify some dots to draw!');
          return;
        }
        if(dots.constructor!=Array){
          alert('you should specify some dots to draw!');
          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>
  </head>
  <body>
    <div id="main" style="border-bottom: solid red 0px; height:100%; width:100%">
    </div>
  </body>
  <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>


转载自:http://blog.csdn.net/sunxing007/article/details/4103787

GuardAngelY
关注
纯JS 绘制数学函数
01-21
绘图对象Plot，包含了JS画点，JS画线，JS画正弦sin，JS画余弦cos，tan，圆，多边形。 可设置原点位置，画笔颜色，画笔粗细，坐标线颜色。 其实原理很简单，用长1px宽1px的div模拟点，由点及线，由线及面。 贴上来权当相互学习，以免JS新手觉得js画图是多神秘的事情。 JS绘制数学函数图 body{ margin: 0px; padding: 0px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js 绘制数学函数
weixin_34071713的博客
06-16 153
<!-- <!doctype html> --> <html lang="en"> <head> <meta charset="UTF-8"> <title>js绘制数学函数</title> </head> <body> <div id="...
JS画图函数
ismycxp的专栏
05-12 1068
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" c
Osc:在 HTML5 画布上绘制数学函数的简单 web 应用程序
06-03
在本项目中，"Osc:在 HTML5 画布上绘制数学函数的简单 web 应用程序" 是一个利用 JavaScript 实现的交互式应用程序，它允许用户在浏览器的 HTML5 画布元素上动态地可视化数学函数。HTML5 画布是一个强大的图形绘制...
flex 绘制数学函数图象的源码 原创
11-25
在本文中，我们将深入探讨如何使用Flex这一强大的开发框架来绘制数学函数图像，这对于初学者来说是一个很好的学习项目。Flex是Adobe开发的一款基于ActionScript 3.0的开源框架，主要用于构建富互联网应用程序（RIA）...
Javascript中的数学函数
10-30
### JavaScript中的数学函数 在JavaScript编程语言中，数学函数是一组强大的工具，用于执行各种数学运算，包括计算常数、乘方、三角函数、舍入等操作。这些函数被封装在`Math`对象中，无需实例化即可直接调用。 ##...
JS绘制数学函数图
xxgxgx的专栏
05-14 4271
JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /** * 绘图对象 * 包含各个绘图函数，比如画点，线段，多边形，
JavaScript画基本图形函数
10-14
JavaScript画基本图形函数，包含两种实现方式：table方式和div方式。含详细的函数说明。
java script 画图函数包 wz_jsgraphics.js 3.03
01-15
谁说JavaScript 不能画图呢? 从服务器端生成分析图再下载到游览器在服务器资源以及网络传输上都不合算,也不利于用户体验. 怎么办呢? 就在浏览器端使用JavaScript直接进行画图吧. wz_jsgraphics.js 3.03 资源中有wz_jsgraphics.js 3.03, 有其使用说明,还有一个简单的例子. 我试用了一下,可以的. 打算在一个项目中使用一下.
前端Js显示数学公式插件(MathJax最新源码)
09-26
MathJax官网总是下载失败，亲测可用，放一个2.3版本的源码在这里。MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。
graphFunction:基于canvas的数学函数曲线绘制插件
05-19
只是用来画函数图像的 默认参数 options = { width: 600, height: 400, backgroundColor: "white",//背景色 animation: true,//是否显示动画 xUnit: { //x轴单位 pixel: 100,//一个单位有多少像素 value: 1,//单位值 mince: 1,//将一个单位细分为多少，值越大，精度越高，默认为1，即不细分 showScale: function (value) { //显示刻度值的条件 return true; }, convert: function (value) {//单位转换
js绘图，绘制各种图形，纯js
05-25
js绘图，绘制各种图形，纯js，还没正式用过
javascript制作公式编辑器，函数编辑器和图形绘制
热门推荐
JJF代码男孩
03-14 1万+
自己是电子信息方向的，因此总是需要处理大量的电路实验、电路数据和电路仿真处理，每次处理数据时候还需要同样的数据很多遍， 又需要关于电路的频率响应和时域响应情况，所以一直有做一个这样公式编辑器的打算了。 本来想使用VC的，但是想到javascript的eval()函数，就可以省去数据计算的算法了，而且对于用户函数扩展都有帮助。      仔细想想后，作品需要有公式编辑、自定义操作符、自定义函数、系
数学公式编译为html,数学公式mathquill: MathQuill 是一个 JavaScript 库，实现了纯 HTML、CSS 和 JS 的所见即所得的数学公式编辑。...
weixin_34035088的博客
06-10 397
MathQuill is a web formula editor designed to make typing math easy and beautiful.The MathQuill project is supported by its partners. We hold ourselves to a compassionate Code of Conduct.MathQuill is ...
一种基于纯js的函数绘图接口MB_Plot
marsboy1992的专栏
03-26 1862
当今的Web前端开发中，实用工具类接口无可厚非成为了程序猿们的神器。一款既实用，又人性化的接口更是可想而不可得的东西了。本程序基于Javascript，用户指定一个有效的div为画布背景即可调用使用。本接口可扩展。具体调用参数和内部方法将在下面列出。        类名：MB_Plot        创建实例：var Plot=new MB_Plot(containerId, ox, oy,
用Html5制作的一款数学教学程序Function Graphics(绘制函数图的程序)
Yorhom's Game Box
04-04 349
最近我不仅对游戏开发感兴趣，还对函数图感兴趣，特此我开发了这个程序。以下是一些介绍和下载演示地址，喜欢的朋友可以看看： 一，产品名片 产品名：Function Graphics 版本： 0.1 开发者：Yorhom Wang 首次发行时间：2013年 4月4日 分类：教学程序 功能：画出一，二，三次函数图象 开发语言：javascript&amp;html5 二，怎么...
canvas相关数学函数(个人笔记)
tinfengyee的博客
10-14 273
sin cos tan atan(y/x) -pi/2 ~ pi/2 atan2(y-y0, x-x0) -pi ~ pi 求roate角度 // atan getAngle(start, end) { var diff_x = end.x - start.x, diff_y = end.y - start.y; if (diff_x &gt...
pyecharts绘制三角函数
最新发布
08-08
如果你想使用PyEcharts绘制三角函数相关的图表，通常不是直接绘制三角函数，因为ECharts本身并不支持数学函数的绘制。不过，你可以通过结合数据生成的方式来呈现三角函数的变化。 例如，你可以先计算一系列的x值，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值