简单描点曲线实例

最新推荐文章于 2023-10-27 15:00:44 发布

原创最新推荐文章于 2023-10-27 15:00:44 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #div #xhtml #class #html #360

本文介绍了一个简单的HTML页面，该页面使用纯JavaScript实现血压变化的曲线图。通过自定义的绘图函数，如画点、画线等，展示了血压随时间变化的趋势。包括了基本的坐标轴、刻度和示例曲线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>血压曲线图</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
.STYLE2 {
font-family: "宋体";
font-weight: bold;
}
</style>
</head>

<body>
<div align="center" class="STYLE2"><font size="2">血压情况实时曲线图</font>
<span class="style1">
<script type="text/javascript">
function makedot(x,y){ //画点函数
document.write("<div style='height:1px;;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>")
}

/**
函数功能：根据给定的圆心和半径画圆
函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。
*/
function circle(x,y,r){ //(x,y)圆心，r半径
var dotx,doty,radio;
var Pi=Math.PI;
makedot(x,y);
for(var i=0;i<360;i+=0.5){
  radio=i*Pi/180;
  dotx=r*Math.cos(radio)+x;
  doty=r*Math.sin(radio)+y
  makedot(dotx,doty);
}
}

/**
函数功能：根据指点矩形左上角坐标及长宽绘制矩形。
函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标
*/
function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高
for(var i=0;i<w;i++){
  makedot(x+i,y);
  makedot(x+i,y+h);
}
for(var i=0;i<h;i++){
  makedot(x,y+i);
  makedot(x+w,y+i);
}
}

/**
函数功能：根据两点坐标画直线。
函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理
*/
function line(x1,y1,x2,y2){
var slope=(y2-y1)/(x2-x1); //斜率
var diff=x2-x1;
if(x1<x2){
  for(var i=0;i<diff;i++){
   makedot(x1+i,y1+slope*i);
  }
}else if(x1>x2){
  for(var i=0;i>diff;i--){
   makedot(x1+i,y1+slope*i);
  }
}else{ //画垂直线
  var temp=y2-y1;
  if(temp>0){
   for(var i=0;i<temp;i++){
    makedot(x1,y1+i);
   }
  }else{
   for(var i=0;i>temp;i--){
    makedot(x1,y1+i);
   }
  }
}
}

/**
函数功能：根据给定的三点坐标画三角形
函数思路：直接利用画线函数画三条线即可
*/
function triangle(x1,y1,x2,y2,x3,y3){
line(x1,y1,x2,y2);
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);
}

/**
函数功能：根据给定的一系列坐标点画多边形
函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线
*/
function polygon(){
var args=arguments.length;
if(args%2!=0) return -1;
var realargs=args/2; //坐标个数
for(var i=0;i<realargs-1;i++){
line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);
}
line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]);
}

function writeLan(){
document.write("<div style=';left:199px;top:200px'>"+"0"+"</div>");
document.write("<div style=';left:605px;top:200px'>"+"横坐标(时间)"+"</div>");
document.write("<div style=';left:199px;top:15px'>"+"纵坐标(血压值)"+"</div>");
}
line(200,200,600,200);//x轴
line(240,200,240,193);//x轴刻度
line(280,200,280,193);//x轴刻度
line(320,200,320,193);//x轴刻度
line(360,200,360,193);//x轴刻度
line(400,200,400,193);//x轴刻度
line(440,200,440,193);//x轴刻度
line(480,200,480,193);//x轴刻度
line(520,200,520,193);//x轴刻度
line(560,200,560,193);//x轴刻度
line(200,180,207,180);//y轴刻度
line(200,160,207,160);//y轴刻度
line(200,140,207,140);//y轴刻度
line(200,120,207,120);//y轴刻度
line(200,100,207,100);//y轴刻度
line(200,80,207,80);//y轴刻度
line(200,60,207,60);//y轴刻度
line(200,40,207,40);//y轴刻度
line(200,200,200,20);//y轴刻度
line(200,200,220,180);//曲线1
line(220,180,240,150);//曲线2
line(240,150,500,100);//曲线3
line(500,100,600,40);//曲线4
writeLan();//文字
</script>
</span></div>
</body>

</html>