高中数学 博客分类： js 高中 抛物线 椭圆 双曲线 直线
程序员文章站
2024-03-19 13:22:28
...
<html>
<head>
</head>
<body>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="line" width="300" height="300" ></canvas>
</div>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="parabola" width="300" height="300" ></canvas>
</div>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="sinxx" width="300" height="300" ></canvas>
</div>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="sinxx" width="300" height="300" ></canvas>
</div>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="ellipse" width="300" height="300" ></canvas>
</div>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="hyperbola" width="300" height="300" ></canvas>
</div>
<div width="305" height="305" style="float:left;width:400px;height:400px;border:1px solid blue;">
<canvas id="hyperbola2" width="300" height="300" ></canvas>
</div>
</body>
</html>
<script>
class Point
{
constructor(x, y){
this.x = x;
this.y = y;
}
toString(){
return '(' + this.x + ', ' + this.y + ')';
}
}
function transXY(p,p0){
var pn= new Point(0,0);
pn.x=p0.x+p.x;
pn.y=parseFloat(p0.y)-parseFloat(p.y);
return pn;
}
function drawAxis(ctx,p0){
ctx.strokeStyle="#000000";
ctx.beginPath();
ctx.moveTo(p0.x-150,p0.y);
ctx.lineTo(p0.x+150,p0.y);
ctx.stroke();
ctx.moveTo(p0.x,p0.y-150);
ctx.lineTo(p0.x,p0.y+150);
ctx.stroke();
ctx.strokeStyle="#0000ff";
}
function drawLine(id,p1,p2,p0){
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
p1=transXY(p1,p0);
ctx.moveTo(p1.x,p1.y);
p2=transXY(p2,p0);
ctx.lineTo(p2.x,p2.y);
ctx.stroke();
}
function drawLine2(id,a,b,p0){ //y=ax+b
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
var y=a*(-100)+b;
p1=transXY(new Point(-100,y),p0);
ctx.moveTo(p1.x,p1.y);
y=a*100+b;
p2=transXY(new Point(100,y),p0);
ctx.lineTo(p2.x,p2.y);
ctx.stroke();
}
// drawLine("line",new Point(-100,-100),new Point(100,100),new Point(150,150));
drawLine2("line",1,0,new Point(150,150));
drawLine2("line",1,10,new Point(150,150));
drawLine2("line",2,0,new Point(150,150));
drawLine2("line",2,30,new Point(150,150));
drawLine2("line",-2,3,new Point(150,150));
function drawParabola(id,a,b,c,p0){ // y=ax2+bx+c;
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
var step=0.01;
var hasDraw=false;
var p1=new Point(150,150);
for(var x=-150;x<150;x=x+step ){
var y=a*x*x+b*x+c;
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.x,p1.y);
}else{
ctx.moveTo(p1.x,p1.y);
hasDraw=true;
}
}
ctx.stroke();
}
drawParabola("parabola",0.1,2,1,new Point(150,150));
drawParabola("parabola",-0.1,2,1,new Point(150,150));
function drawSin(id,a,p0){ // y=ax2+bx+c;
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
var step=0.01;
var hasDraw=false;
var p1=new Point(150,150);
for(var x=-150;x<150;x=x+step ){
var y=Math.sin(x);
p1=transXY(new Point(x*20,y*20),p0);
if(hasDraw){
ctx.lineTo(p1.x,p1.y);
}else{
ctx.moveTo(p1.x,p1.y);
hasDraw=true;
}
}
ctx.stroke();
}
drawSin("sinxx",1,new Point(150,150));
function drawEllipse(id,a,b,p0){ // y^2/b^2+x^2/a^2=1
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
var step=0.01;
var hasDraw=false;
var p1=new Point(150,150);
for(var x=-150;x<150;x=x+step ){
var d=1000-x*x/a/a;
if(d<0)
continue;
var y=b*Math.sqrt(d);
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.x,p1.y);
}else{
ctx.moveTo(p1.x,p1.y);
hasDraw=true;
}
}
for(var x=150;x>=-150;x=x-step ){
var d=1000-x*x/a/a;
if(d<0)
continue;
var y=-b*Math.sqrt(d);
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.x,p1.y);
}else{
ctx.moveTo(p1.x,p1.y);
hasDraw=true;
}
}
ctx.stroke();
}
drawEllipse("ellipse",4,2,new Point(150,150));
function drawHyperbola(id,a,b,p0){ // y^2/b^2-x^2/a^2=1
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
var step=0.01;
var hasDraw=false;
var p1=new Point(150,150);
for(var x=-150;x<150;x=x+step ){
var d=100+x*x/a/a;
if(d<0)
continue;
var y=b*Math.sqrt(d);
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.x,p1.y);
}else{
ctx.moveTo(p1.x,p1.y);
hasDraw=true;
}
}
var hasDraw=false;
for(var x=150;x>=-150;x=x-step ){
var d=100+x*x/a/a;
if(d<0)
continue;
var y=-b*Math.sqrt(d);
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.x,p1.y);
}else{
ctx.moveTo(p1.x,p1.y);
hasDraw=true;
}
}
ctx.stroke();
}
drawHyperbola("hyperbola",4,2,new Point(150,150));
function drawHyperbola2(id,a,b,p0){ // y^2/b^2-x^2/a^2=1
var c=document.getElementById(id);
var ctx=c.getContext("2d");
drawAxis(ctx,p0);
ctx.beginPath();
var step=0.01;
var hasDraw=false;
var p1=new Point(150,150);
for(var x=-150;x<150;x=x+step ){
var d=100+x*x/a/a;
if(d<0)
continue;
var y=b*Math.sqrt(d);
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.y,p1.x);
}else{
ctx.moveTo(p1.y,p1.x);
hasDraw=true;
}
}
var hasDraw=false;
for(var x=150;x>=-150;x=x-step ){
var d=100+x*x/a/a;
if(d<0)
continue;
var y=-b*Math.sqrt(d);
p1=transXY(new Point(x,y),p0);
if(hasDraw){
ctx.lineTo(p1.y,p1.x);
}else{
ctx.moveTo(p1.y,p1.x);
hasDraw=true;
}
}
ctx.stroke();
}
drawHyperbola2("hyperbola2",4,2,new Point(150,150));
</script>
上一篇： IDS4 使用数据库登录