代码如下：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>函数2*x+Math.sqrt(5-x*x)及其共轭函数2*x-Math.sqrt(5-x*x)曲线勾画</title>
  6.     </head>
  7.  
  8.      <body onload="draw()">
  9.         <canvas id="myCanvus" width="1300px" height="640px" style="border:1px dashed black;">
  10.             出现文字表示你的浏览器不支持HTML5
  11.         </canvas>
  12.      </body>
  13. </html>
  14. <script type="text/javascript">
  15. <!--
  16.     function draw(){
  17.         var canvas=document.getElementById("myCanvus");
  18.         var canvasWidth=1300;
  19.         var canvasHeight=640;
  20.  
  21.         var context=canvas.getContext("2d");
  22.  
  23.         context.fillStyle = "white";
  24.         context.fillRect(0, 0, canvasWidth, canvasHeight);
  25.  
  26.         context.strokeStyle = "black";
  27.         context.fillStyle = "black";
  28.  
  29.         // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向
  30.         var offsetY=320;// Y向偏移值，正值向上偏，用来画坐标轴
  31.         var offsetX=650;// X向偏移值，正值向右偏，用来画坐标轴
  32.  
  33.         context.save();
  34.         context.translate(0+offsetX,canvasHeight-offsetY);
  35.  
  36.         drawAxisXText(context);// 文字和线分开画比较好处理
  37.         drawAxisYText(context);
  38.         drawTitleText(context);
  39.  
  40.         context.rotate(getRad(180));
  41.         context.scale(-1,1);        
  42.  
  43.         drawAxisX(context);
  44.         drawAxisY(context);
  45.         drawCurve(context);       
  46.  
  47.         context.restore();
  48.     }
  49.  
  50.     function drawTitleText(ctx){
  51.         ctx.lineWidth=0.5;
  52.         ctx.strokeStyle='navy';
  53.         ctx.fillStyle='navy';
  54.  
  55.         var x=350;
  56.         var y=-250;
  57.  
  58.         // 写文字
  59.         ctx.fillText("2*x+Math.sqrt(5-x*x) 红色曲线",x,y);
  60.  
  61.         ctx.fillText("2*x-Math.sqrt(5-x*x) 绿色曲线",x,y+20);
  62.  
  63.         ctx.fillText("  作者:逆火狂飙",x+170,y+30);
  64.     }
  65.  
  66.     function drawCurve(ctx){
  67.         var SU=50;// Scale Unit
  68.  
  69.         var cds=[{}];
  70.         var cds1=[{}];
  71.  
  72.         var x,y;
  73.         for(x=-13;x<=13;x+=0.01){
  74.             if(5-x*x>0){
  75.                 y=2*x+Math.sqrt(5-x*x);// 函数式在此
  76.                 var arr={"x":x,"y":y};
  77.                 cds.push(arr);    
  78.  
  79.                 y=2*x-Math.sqrt(5-x*x);// 与上面函数互为共轭函数
  80.                 var arr={"x":x,"y":y};
  81.                 cds1.push(arr);
  82.             }
  83.         }
  84.  
  85.         // 2*x+Math.sqrt(5-x*x)
  86.         ctx.strokeStyle = "red";
  87.         ctx.beginPath();
  88.  
  89.         for(var i=0; i<cds.length; i++){
  90.             ctx.lineTo(cds[i].x*SU,cds[i].y*SU);
  91.         } 
  92.  
  93.         ctx.stroke();
  94.         ctx.closePath();
  95.  
  96.         // 2*x-Math.sqrt(5-x*x);
  97.         ctx.strokeStyle = "green";
  98.         ctx.beginPath();
  99.  
  100.         for(var i=0; i<cds1.length; i++){
  101.             ctx.lineTo(cds1[i].x*SU,cds1[i].y*SU);
  102.         } 
  103.  
  104.         ctx.stroke();
  105.         ctx.closePath();
  106.  
  107.     }
  108.  
  109.     function drawAxisX(ctx){
  110.         ctx.save();
  111.  
  112.         ctx.lineWidth=0.5;
  113.         ctx.strokeStyle='navy';
  114.         ctx.fillStyle='navy';
  115.  
  116.         var start=-650;
  117.         var end=650;
  118.  
  119.         // 画轴
  120.         ctx.beginPath();
  121.         ctx.moveTo(start, 0);
  122.         ctx.lineTo(end, 0);
  123.         ctx.stroke();
  124.         ctx.closePath();
  125.  
  126.         // 画箭头
  127.         ctx.beginPath();
  128.         ctx.moveTo(end-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);
  129.         ctx.lineTo(end, 0);
  130.         ctx.lineTo(end-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);
  131.         ctx.stroke();
  132.         ctx.closePath();
  133.  
  134.         // 画刻度
  135.         var x,y;
  136.         y=5;
  137.         for(x=start;x<end;x+=50){
  138.             ctx.beginPath();
  139.             ctx.moveTo(x, 0);
  140.             ctx.lineTo(x, y);
  141.  
  142.             ctx.stroke();
  143.             ctx.closePath();
  144.         }
  145.  
  146.         ctx.restore();
  147.     }
  148.  
  149.     function drawAxisXText(ctx){
  150.         ctx.lineWidth=0.5;
  151.         ctx.strokeStyle='navy';
  152.         ctx.fillStyle='navy';
  153.  
  154.         var start=-650;
  155.         var end=650;
  156.  
  157.         // 写文字
  158.         var x,y=5;
  159.         for(x=start;x<end;x+=50){
  160.             ctx.fillText(x/50,x,y+10);
  161.         }
  162.     }
  163.  
  164.     function drawAxisY(ctx){
  165.         ctx.save();
  166.  
  167.         ctx.lineWidth=0.5;
  168.         ctx.strokeStyle='navy';
  169.         ctx.fillStyle='navy';
  170.  
  171.         var start=-300;
  172.         var end=300;
  173.  
  174.         // 画轴
  175.         ctx.beginPath();
  176.         ctx.moveTo(0, start);
  177.         ctx.lineTo(0, end);
  178.         ctx.stroke();
  179.         ctx.closePath();
  180.  
  181.         // 画箭头
  182.         ctx.beginPath();
  183.         ctx.moveTo(Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
  184.         ctx.lineTo(0, end);
  185.         ctx.lineTo(-Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);
  186.         ctx.stroke();
  187.         ctx.closePath();
  188.  
  189.         // 画刻度
  190.         var x,y;
  191.         x=5;
  192.         for(y=start;y<end;y+=50){
  193.             ctx.beginPath();
  194.             ctx.moveTo(x, y);
  195.             ctx.lineTo(0, y);
  196.  
  197.             ctx.stroke();
  198.             ctx.closePath();
  199.         }
  200.     }
  201.  
  202.     function drawAxisYText(ctx){
  203.         ctx.lineWidth=0.5;
  204.         ctx.strokeStyle='navy';
  205.         ctx.fillStyle='navy';
  206.  
  207.         var start=-250;
  208.         var end=350;
  209.  
  210.         // 写文字
  211.         var x=-19,y=5;
  212.         for(y=start;y<end;y+=50){
  213.  
  214.             if(y!=0){
  215.                 ctx.fillText(-y/50,x,y);
  216.             }
  217.         }
  218.     }
  219.  
  220.     function getRad(degree){
  221.         return degree/180*Math.PI;
  222.     }
  223.  
  224.     function cutShort(str,length){
  225.         if(str.length>length){
  226.             str=str.substr(0,length)+"...";
  227.         }
  228.  
  229.         return str;
  230.     }
  231. //-->
  232. </script>

在笛卡尔坐标系上描绘函数2*x+Math.sqrt(5-x*x)及其共轭函数2*x-Math.sqrt(5-x*x)曲线的更多相关文章

  1. 在笛卡尔坐标系上描绘函数(x*x+1)/(x*x-1)曲线

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  2. 在笛卡尔坐标系上描绘函数 y=4x^2-2/4x-3

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  3. 在笛卡尔坐标系上描绘y=x^2-4/x^2-2x-3曲线

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  4. AcWing：112. 雷达设备（贪心 + 笛卡尔坐标系化区间）

    假设海岸是一条无限长的直线,陆地位于海岸的一侧,海洋位于另外一侧. 每个小岛都位于海洋一侧的某个点上. 雷达装置均位于海岸线上,且雷达的监测范围为d,当小岛与某雷达的距离不超过d时,该小岛可以被雷达覆 ...

  5. 如果是在有master上开启了该参数，记得在slave端也要开启这个参数（salve需要stop后再重新start），否则在master上创建函数会导致replaction中断。

    如果是在有master上开启了该参数,记得在slave端也要开启这个参数(salve需要stop后再重新start),否则在master上创建函数会导致replaction中断.

  6. 自学Linux Shell16.4-在命令行上使用函数

    点击返回 自学Linux命令行与Shell脚本之路 16.4-在命令行上使用函数 脚本函数不仅可以用作shell脚本命令,也可以用作命令行界面的命令.一旦在shell中定义了函数,可以从系统的任意目录 ...

  7. HTML5 Canvas 笛卡尔坐标系转换尝试

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  8. Javascript作业—数组去重（要求：原型链上添加函数）

    数组去重(要求:原型链上添加函数) <script> //数组去重,要求:在原型链上添加函数 //存储不重复的--仅循环一次 if(!Array.prototype.unique1){ A ...

  9. js进阶 12-8 如何知道上一个函数的返回值是什么（如何判断上一个函数是否执行成功）

    js进阶 12-8 如何知道上一个函数的返回值是什么(如何判断上一个函数是否执行成功) 一.总结 一句话总结:event的result属性即可. 1.event的result属性的实际应用场景是什么? ...

随机推荐

  1. Openstack 清除openstack网络与路由 （十七）

    一)清除openstack网络与路由 “清除openstack网络与路由”和”添加openstack网络与路由”的操作步骤相反. 添加网络或路由时是先建 搭建网络>搭建子网>建立端口, 而 ...

  2. centos 磁盘分区格式化与挂载

    1 查看系统里硬盘信息fdisk -l 2 磁盘分区fdisk /dev/sdc输入m显示帮助a:命令指定启动分区:d:命令删除一个存在的分区:l:命令显示分区ID号的列表:m:查看fdisk命令帮助 ...

  3. JavaScript 闭包(随笔)

    闭包,伟大的闭包.... 先看看百科对百度的定义是什么样的. 百科说:闭包是指可以包含自由(未绑定到特定对象)变量的代码块:这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境 ...

  4. PL\SQL结构控制、异常

    PL\SQL结构控制    1.IF条件控制语句(三种基本方式+IF语句的嵌套使用)        (1)IF...        (2)IF...ELSE        (3)IF...ELSIF. ...

  5. 使用织梦开源的分词算法库编写的YII获取分词扩展

    在编辑文章中,很多时候都需要自动根据文章内容获取关键字的功能,因此,本文主要是说明如何在yii中使用织梦开源的分词算法编写一个独立的扩展,可以在不同的模块中使用,步骤如下: 1 到这里下载其他朋友整理 ...

  6. 利用tempo将json数据填充到html模板

    1.下载tempo 2.使用 <!DOCTYPE html> <html> <head lang="zn-ch"> <meta chars ...

  7. Oracle数据库查看用户状态

    一.当前ORACLE用户的状态可查看视图DBA_USERS;一般情况下在使用的正常用户均处于OPEN状态. 1 SQL> select username,account_status from  ...

  8. python笔记15-ini配置文件（configparser）

    前言 使用配置文件来灵活的配置一些参数是一件很常见的事情,配置文件的解析并不复杂,在python里更是如此,在官方发布的库中就包含有做这件事情的库,那就是configParser configPars ...

  9. python笔记10-多线程之线程同步（锁lock）

    前言 关于吃火锅的场景,小伙伴并不陌生,吃火锅的时候a同学往锅里下鱼丸,b同学同时去吃掉鱼丸,有可能会导致吃到生的鱼丸. 为了避免这种情况,在下鱼丸的过程中,先锁定操作,让吃火锅的小伙伴停一会,等鱼丸 ...

  10. 16、Xtrabackup备份与恢复

    XTRABACKUP xtrabackup是percona公司开发的第三方备份软件,只备份innodb引擎表的ibd文件(frm不备份),不备份myisam引擎表.备份性能很高,备份期间没有任和锁,d ...