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

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>描绘函数(x*x+1)/(x*x-1)曲线</title></head><body οnlοad="draw()"><canvas id="myCanvus" width="1300px" height="640px" style="border:1px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body>
</html>
<script type="text/javascript">
<!--function draw(){var canvas=document.getElementById("myCanvus");var canvasWidth=1300;var canvasHeight=640;var context=canvas.getContext("2d");context.fillStyle = "white";context.fillRect(0, 0, canvasWidth, canvasHeight);context.strokeStyle = "black";context.fillStyle = "black";// 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向var offsetY=320;// Y向偏移值，正值向上偏，用来画坐标轴var offsetX=650;// X向偏移值，正值向右偏，用来画坐标轴
context.save();context.translate(0+offsetX,canvasHeight-offsetY);drawAxisXText(context);// 文字和线分开画比较好处理
        drawAxisYText(context);drawTitleText(context);context.rotate(getRad(180));context.scale(-1,1);        drawAxisX(context);        drawAxisY(context);       drawCurve(context);       context.restore();        }function drawTitleText(ctx){        ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';var x=350;var y=-250;// 写文字ctx.fillText("y=(x*x+1)/(x*x-1)",x,y);        ctx.fillText("  作者:逆火狂飙",x+170,y+30);}function drawCurve(ctx){var SU=50;// Scale Unitvar cds=[{}];var cds1=[{}];var cds2=[{}];var x,y;for(x=-13;x<=13;x+=0.01){    if(x<-1-0.01){// 0.01 防止除零溢出y=(x*x+1)/(x*x-1);// 函数式在此var arr={"x":x,"y":y};cds.push(arr);    }if(x>1){y=(x*x+1)/(x*x-1);// 函数式在此var arr={"x":x,"y":y};cds1.push(arr);    }if(x>-1 && x<1){y=(x*x+1)/(x*x-1);// 函数式在此var arr={"x":x,"y":y};cds2.push(arr);    }}ctx.strokeStyle = "red";ctx.beginPath();        console.log("cds.length="+cds.length);for(var i=0; i<cds.length; i++){  console.log("12="+cds[i]);ctx.lineTo(cds[i].x*SU,cds[i].y*SU);} ctx.stroke();ctx.closePath();ctx.beginPath();        for(var i=0; i<cds1.length; i++){  ctx.lineTo(cds1[i].x*SU,cds1[i].y*SU);} ctx.stroke();ctx.closePath();ctx.beginPath();        for(var i=0; i<cds2.length; i++){  ctx.lineTo(cds2[i].x*SU,cds2[i].y*SU);} ctx.stroke();ctx.closePath();}function drawAxisX(ctx){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';var start=-650;var end=650;// 画轴
        ctx.beginPath();ctx.moveTo(start, 0);ctx.lineTo(end, 0);ctx.stroke();ctx.closePath();// 画箭头
        ctx.beginPath();ctx.moveTo(end-Math.cos(getRad(15))*10, Math.sin(getRad(15))*10);ctx.lineTo(end, 0);ctx.lineTo(end-Math.cos(getRad(15))*10, -Math.sin(getRad(15))*10);ctx.stroke();ctx.closePath();// 画刻度var x,y;y=5;for(x=start;x<end;x+=50){ctx.beginPath();ctx.moveTo(x, 0);ctx.lineTo(x, y);ctx.stroke();ctx.closePath();}ctx.restore();}function drawAxisXText(ctx){        ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';var start=-650;var end=650;// 写文字var x,y=5;for(x=start;x<end;x+=50){ctx.fillText(x/50,x,y+10);
        }}function drawAxisY(ctx){ctx.save();ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';var start=-300;var end=300;// 画轴
        ctx.beginPath();ctx.moveTo(0, start);ctx.lineTo(0, end);ctx.stroke();ctx.closePath();// 画箭头
        ctx.beginPath();ctx.moveTo(Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);ctx.lineTo(0, end);ctx.lineTo(-Math.sin(getRad(15))*10, end-Math.cos(getRad(15))*10);ctx.stroke();ctx.closePath();// 画刻度var x,y;x=5;for(y=start;y<end;y+=50){ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(0, y);ctx.stroke();ctx.closePath();}}function drawAxisYText(ctx){        ctx.lineWidth=0.5;ctx.strokeStyle='navy';ctx.fillStyle='navy';var start=-250;var end=350;// 写文字var x=-19,y=5;for(y=start;y<end;y+=50){if(y!=0){ctx.fillText(-y/50,x,y);
            }}}function getRad(degree){return degree/180*Math.PI;
    }function cutShort(str,length){if(str.length>length){str=str.substr(0,length)+"...";}return str;}
//-->
</script>

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/8135765.html，如需转载请自行联系原作者

在笛卡尔坐标系上描绘函数(xx+1)/(xx-1)曲线相关推荐

在笛卡尔坐标系上绘制抛物线
点评:抛物线是二次曲线的别称,图中展示了六条曲线,当x的二次项系数为正时开口向上,曲线与x轴交点个数决定了实数解的个数,如果没有交点,则只有虚数解,如y=x2+2x+2的解为-1+i,抛物线的弯曲程度 ...
Cesium中笛卡尔坐标系到底是什么鬼
使用Cesium开发三维GIS应用离不开笛卡尔坐标系,在CesiumJS中定义类型是Cartesian3,这是Cesium的基础数据类型,所有坐标最后均转换成这个类型参与三维渲染,包括屏幕坐标,地 ...
笛卡尔坐标系和Frenet坐标系
笛卡尔坐标系和Frenet坐标系 Frenet坐标系,自动驾驶"混乱"的源头 [自动驾驶]运动规划丨轨迹规划丨Frenet坐标转换 [自动驾驶]笛卡尔坐标系和frenet坐标系相互 ...
柱坐标系下的ns方程_笛卡尔坐标系到底是什么？
最近,我上传了一张名为"数学的深渊"的图片,大家颇感兴趣(可能被数学伤的很深吧^_^).接下来的日子,我会和大家一起,开启"十舍数学"号潜水艇,一层一层,前往数 ...
基于笛卡尔坐标系下的三边定位的研究（TOA方式定位）
基于笛卡尔坐标系下的三边定位的简单研究(TOA方式定位) 引言: 在无线定位中,TOA方式下的三边定位有它的优越性,定位精度高,三个基站就可实现精确定位.目前的超宽带技术的普及应用,普遍采用该种定位的 ...
xy坐标正负方向_【笛卡尔坐标系】
[壹] 笛卡尔坐标系(Cartesian coordinates)就是直角坐标系和斜坐标系的统称. 相交于原点的两条数轴,构成了平面放射坐标系.如两条数轴上的度量单位相等,则称此放射坐标系为笛卡尔坐标 ...
笛卡尔坐标系_Shader学习（4）坐标系和矢量的概念
文中多有引用,如有侵权请指出. 坐标系和矢量的概念 1. 笛卡尔坐标系 (1) 在三维游戏的实现中,所有的物体和图像都在笛卡尔坐标系的基础上实现. (2) 二维坐标系和三维坐标系,这些知识在高中时期就 ...
python笛卡尔坐标系_THREE笛卡尔右手坐标系详解
1,正常的笛卡尔右手坐标系,以屏幕右方为+X轴,屏幕上方为+Y轴,垂直屏幕向外为+Z轴,如下图,xy轴组成的平面为屏幕面但由于THREE里的相机并不总是从屏幕正前方视角,还可以设置坐标系任意一个轴为 ...
NETDMIS5.0笛卡尔坐标系和矢量2023
1.笛卡尔坐标系笛卡尔坐标系就是直角坐标系和斜角坐标系的统称.在三坐标测量中的笛卡尔坐标系是指相交于原点的三条数轴,构成了空间仿射坐标系.笛卡尔坐标系有如下特点:三个轴的原点为同一个点,三个轴两两垂 ...

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

在笛卡尔坐标系上描绘函数(xx+1)/(xx-1)曲线相关推荐

最新文章

热门文章

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

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

最新文章

热门文章

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

在笛卡尔坐标系上描绘函数(xx+1)/(xx-1)曲线相关推荐