JS绘制数学函数图

最新推荐文章于 2021-06-02 21:40:41 发布
最新推荐文章于 2021-06-02 21:40:41 发布
阅读量4.2k 收藏 12
点赞数 1
分类专栏： javascript 文章标签： JavaScript 
<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', 800, 500, 'green','red',1);  
    Plot.sin(720);  
    Plot.setBrushWeight(3);  
    Plot.cos(720);  
    Plot.setBrushWeight(2);  
    Plot.circle(100,200,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>
xxgxgx
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高德地图JS API 2.0绘制编辑多个矢量图形（圆形和多边形）
Zan_Z的博客
04-26 4014
20220425_173215 功能：1.可选择绘制类型（圆形或多边形），2.可选择不同区域并随当前区域自适应地图缩放。 3.编辑图形时可根据大小自适应地图缩放。 默认初始矢量图：1.圆形：根据中心点位置，半径1公里圆。2、多边形矢量图默认生成正方形。根据中心点位置，计算生成四个方位的位置。 ...
简单描点曲线实例
Pretender
07-19 1060
  index.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">血压曲线图.style1 {    font-size: x-small;}.STYLE2 { font-family: "宋体"; font-weight: bold;}血
js正弦函数图
dichen0168的博客
03-30 249
<!DOCTYPE html> <html> <head> <title>js画正弦函数图</title> <style type="text/css"> *{ margin:0; padding: 0; } .painter{ ...
使用d3.js绘制曲线图
xinxiaoyong的博客
06-07 3121
一、先看效果图： 二、代码详情，此代码可直接复制到本地看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>线型图表</title> <style type="text/css"> #container{ width: 500px;...
Vue.js使用矢量图
xiuyuandashen的博客
06-02 654
安装依赖 npm i svg-sprite-loader --save 目录结构 创建 svg-icon 组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/> </svg> </template> <script> export default { name: 'SvgIcon', pro
纯JS 绘制数学函数
01-21
绘图对象Plot，包含了JS画点，JS画线，JS画正弦sin，JS画余弦cos，tan，圆，多边形。...JS绘制数学函数图 body{ margin: 0px; padding: 0px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
flex 绘制数学函数图象的源码 原创
11-25
在本文中，我们将深入探讨如何使用Flex这一强大的开发框架来绘制数学函数图像，这对于初学者来说是一个很好的学习项目。Flex是Adobe开发的一款基于ActionScript 3.0的开源框架，主要用于构建富互联网应用程序（RIA）...
绘制正弦函数曲线.7z
07-14
2. 图形库：使用编程语言的图形库，如Python的matplotlib或JavaScript的D3.js，创建坐标系并绘制点。 3. 连接点：将计算出的点用线段连接起来，形成连续的曲线。 压缩包内的“zgkdrawsin”可能是一个代码文件，包含...
Osc:在 HTML5 画布上绘制数学函数的简单 web 应用程序
06-03
在本项目中，"Osc:在 HTML5 画布上绘制数学函数的简单 web 应用程序" 是一个利用 JavaScript 实现的交互式应用程序，它允许用户在浏览器的 HTML5 画布元素上动态地可视化数学函数。HTML5 画布是一个强大的图形绘制...
js画矢量图(wz_jsgraphics.js)
03-06
wz_jsgraphics.js+index.html 博文链接：https://sailinglxg.iteye.com/blog/142290
java script 画图函数包 wz_jsgraphics.js 3.03
01-15
谁说JavaScript 不能画图呢? 从服务器端生成分析图再下载到游览器在服务器资源以及网络传输上都不合算,也不利于用户体验. 怎么办呢? 就在浏览器端使用JavaScript直接进行画图吧. wz_jsgraphics.js 3.03 资源中有wz_jsgraphics.js 3.03, 有其使用说明,还有一个简单的例子. 我试用了一下,可以的. 打算在一个项目中使用一下.
JavaScript绘图函数大全
06-10
JavaScript绘图函数大全，非常实用
js 绘制数学函数
qq_45670012的博客
10-13 244
<!-- <!doctype html> --> <html lang="en"> <head> <meta charset="UTF-8"> <title>js绘制数学函数<...
SVG（可缩放矢量图形）基本图形绘制方法与path路径命令
尐轩web前端网络日志
01-15 7157
SVG（Scalable Vector Graphics）可缩放矢量图形 用于描述二维矢量图形的一种图形格式 它不是HTML5新增的 很早之前它就出现了 相比于canvas，它更适合作一些小图标icon等等 它的优点就是无论怎样放大，都不会模糊 canvas是js动态绘图，而svg是XML文档来描述绘图 svg-icon网址：传送门 下面我们来看一下如何使用svg绘图创建svg和ca
前端可视化——SVG矢量图技术
mapbar_front的博客
02-28 7807
SVG 1、SVG 是一种绘图技术，SVG 的全名叫可缩放矢量图形（Scalable Vector Graphics）。 2、SVG 使用 XML 格式定义图像。 3、可伸缩，不失真。 简单示例： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" s...
js实现正弦函数余弦函数图像
zp1996323的博客
09-21 6214
效果: 余弦图像 效果: 正弦图像 PS: 其实正弦与余弦道理完全一致(红点是div)以下是实现这个的代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"></meta> <title>sin函数图像的实现</title> <style type="text/css">
html 绘制函数图像
最新发布
04-29
HTML本身并没有绘制函数图像的功能，但可以通过调用JavaScript库来实现。其中一种常用的库是Canvas，它可以在HTML中创建绘图区域，并通过JavaScript控制绘制内容。 绘制函数图像的步骤通常包括： 1. 在HTML中创建一个Canvas元素，并设置宽高属性。 2. 通过JavaScript获取Canvas对象，使用其API来绘制图像。 3. 编写函数，使用JavaScript实现函数图像的计算和绘制。 4. 将计算所得的数据传递给Canvas绘图API，进行图像绘制。 在具体实现过程中，需要了解JavaScript中数学函数的使用方法，如sin、cos、tan等，以及Canvas API中绘制函数的方法，如lineTo、moveTo等。 绘制函数图像的过程需要较强的数学和编程基础，需要仔细分析函数特点，选取合适的绘制方法和参数，以达到准确绘制的目的。此外，绘制函数图像可能会消耗较多的计算资源，在对性能要求较高的场景中需要谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值