<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>
相关推荐
【标题】"高中数学试卷高中数学高中数学高中数学高中数学" 暗示了这是一个针对高中数学学习资源的集合，可能包含多份考试卷子，旨在帮助学生复习和准备数学考试，尤其是对于数学理解与应用的提升。 【描述】"高中...
标题《高中数学中的思想与方法》和描述《高中数学中的思想与方法》暗示了这份文件是一本专注于高中数学教学内容的书籍。由于内容部分严重损坏，我们无法确定具体的章节或详细知识点，但我们可从书籍标题推断其可能...
历年高中数学联赛试卷及答案 本资源是一份历年高中数学联赛试卷及答案的合辑，涵盖了1981年至今的考试题目和答案。该资源对于高中数学教师和学生具有重要参考价值。 知识点1：高中数学竞赛试题类型 高中数学竞赛...
高中数学教案全套,高中数学备课教案集合
"1981-2019全国高中数学联赛竞赛真题及解析(39年完整版)--452页.pdf" 这个资源提供了1981-2019年全国高中数学联赛的真题及解析，共包含452页的内容。这个资源对高中数学学习和数学竞赛非常有价值。 从标题和描述中...
标题中的“高中数学信息技术与学科教学融合教学案例3”指的是将现代信息技术应用于高中数学教育，以提高教学质量，增强学生的学习体验。在这个特定的教学案例中，主题聚焦于“函数的单调性”，这是高中数学中的核心...
高中数学教资科目三真题，是针对申请高中数学教师资格证书的考生进行的一项关键考试。这个考试旨在评估考生在高中数学领域的专业知识、教学能力和理解深度。以下将详细阐述涉及的知识点及其重要性： 首先，这些真题...
【知识点详解】 1. **高中数学教材教法**： ...综上所述，高中数学教材教法过关考试题涵盖了数学教育理念的更新、几何体的体积计算、函数单调性的教学设计等多个知识点，旨在考察教师对高中数学教学的理解和实践能力。
文件标题《高中数学知识笔记大全.pdf》就表明了这是一份系统整理的高中数学知识笔记，包括了函数、集合、数列、几何等基础数学分支，旨在帮助学生掌握高中数学的核心内容，并为学习高等数学打下坚实的基础。...
高中数学大全1011 大小：10.24MB 更新时间：2014-10-12 《高中数学大全》是一款面向高中理科学生的专业针对数学学习的辅导软件。软件内包含了高考所有知识点；还包含有大量的专题讲解，解题方法，解题策略，...
全国高中数学联赛是面向高中生的数学竞赛，旨在考查学生对高中数学知识的掌握程度以及解决数学问题的能力。根据所提供的文件内容，我们可以了解到历年的全国高中数学联赛试题包括了多个部分，主要分为填空题、解答题...
高中数学教师资格证面试试讲逐字稿万能模板.pdf 本资源主要是高中数学教师资格证面试试讲逐字稿万能模板，提供了不等式的教学设计逐字稿，旨在帮助高中数学教师更好地备战面试。 知识点1：不等式的概念 * 不等式...
2021年全国高中数学联赛广西赛区预赛试题是面向广西地区的高中学生的数学竞赛，其中涉及的知识点覆盖了集合论、实数与不等式、三角函数、向量以及解析几何等多个数学领域。这份试题既是对学生数学能力的一种检验，也...
本资源是一个高中数学教师资格证考试的真题，涵盖了高中数学的多个知识点。下面是从该资源中提炼出的关键知识点： 1.极限的概念和性质：包括极限的定义、性质，及其在函数中的应用。 2.空间曲面和平面截交的知识点...
高中数学手册高中数学手册高中数学手册高中数学手册
高中数学flash课件,很不错的课件，下来 要多多回复哦
高中数学是学生在高中阶段学习的重要学科，涵盖了代数、几何、概率统计等多个领域，对学生的逻辑思维能力和问题解决能力有着深远的影响。本压缩包包含了两套完整的高中数学教材，分别是北师大版和人教版，它们是目前...
高中数学知识点总结 本文档总结了高中数学的各种知识点，涵盖了集合、函数、指数函数、对数函数、幂函数、空间几何体等多个方面的内容。 一、集合 集合是数学中最基本的概念，它是研究的对象的总称。集合有三个...
【高中数学PPT(2020.10.10).rar】是一个包含多份高中数学课程资源的压缩文件，这些PPT课件涵盖了高中数学的多个重要知识点，是教师教学或学生学习的重要参考资料。以下将对这些课件涉及的主要内容进行详细解读： 1....
高中数学基础知识汇总[详细版]高中数学必背公式高中数学公式大全资料合集 高中数学公式大全(所有).doc 高中数学公式大全(最新整理版).doc 高中数学基础知识汇总[详细版].pdf 高中数学必背公式.doc 高中数学高考备考...