📄 huitu.htm
字号:
<html>
<head>
<title>JavaScript绘图</title>
<script language="JavaScript">
var xo=0
var yo=0
var Ox = -1
var Oy = -1
var maxY = 200
var color = "red"
function print(str)
{
document.write(str) <!--document.write()可以输出字符串或是html格式的文本-->
}
function orgY(y)
{
return maxY-y
}
function outPlot(x,y,w,h)
{
print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
}
<!--'+x+'用于将变量x的值动态的传递给style属性-->
function Plot(x,y)
{
outPlot(x,y,1,1)
if(Ox>=0 || Oy>=0)
{
ShowLine(Ox,Oy,x-Ox,y-Oy)
}
Ox = x
Oy = y
}
function ShowLine(x,y,w,h)
{
if(w<0)
{
x+=w;
w=Math.abs(w)
}
if(h<0)
{
y+=h
h=Math.abs(h)
}
if(w<1)
w=1
if(h<1)
h=1
outPlot(x,y,Math.round(w),Math.round(h))
}
function LineTo(x,y)
{
Line(xo,yo,x,y)
}
function sign(n)
{
if(n>0)
return 1
if(n<0)
return -1
return n
}
function Line(x1,y1,x2,y2)
{
x2 = Math.round(x2)
y2 = Math.round(y2)
xo = x2
yo = y2
y1 = orgY(y1)
y2 = orgY(y2)
var str = ""
var i=0
var x = x1
var y = y1
dx = Math.abs(x2-x1)
dy = Math.abs(y2-y1)
s1 = sign(x2-x1) <!--sign是符号函数-->
s2 = sign(y2-y1)
if(dx==0 || dy==0) <!--如果是x1+x2=500或y1+y2=500,执行if语句-->
{
ShowLine(x1,y1,x2-x1,y2-y1)
return
}
if(dx>dy) <!--比较|x1+x2-500|与|y1+y2-500|，使dx等于两者中的最小值-->
{
temp = dx
dx = dy
dy = temp
key = 1
}
else
key = 0
e = 2*dy-dx <!--e=2*|y1+y2-500|-|x1+x2-500|-->
for(i=0;i< dx;i++)
{
px = 0
py = 0
Plot(x,y)
while(e>=0)
{
if(key==1)
{
x += s1
px += s1
}
else
{
y += s2
py += s2
}
e = e-2*dx
}
if(key==1)
y += s2
else
x += s1
e = e+2*dy
}
}
function MoveTo(x,y)
{
Ox = Oy = -1
xo = Math.round(x) <!--返回一个最接近指定值的数，四舍五入函数-->
yo = Math.round(y)
}
<!--标注-->
function biaozhuStr(x,y,s)
{
return '<span style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'
}
function biaozhu(x,y,s,t)
{
var ox = xo
var oy = yo
var oColor = color
if(t==1)
{
print(biaozhuStr(x-5,y+6,"·"+s)) <!--确定标注的位置-->
}
color = oColor
xo = ox
yo = oy
}
</script>
</head>
<body>
<h3><center>显示绘制的折线图形</center></h3>
<script language="JavaScript">
color="#FF000F"
var jd=[[10,20,30,40,0,30],[100,200,300,400,500,600]]
<!--MoveTo(30,jd[0]-60)--> <!--确定起始点的位置-->
<!--biaozhu(xo,yo,jd[0])-->
for(j=0;j< jd.length;j++)
{
LineTo(jd[0][j],jd[1][j])
<!--biaozhu(xo,yo,jd[i],1)--> <!--i=1,是从第二个点214开始标注-->
}
color = "#C0C0C0"
Line(0,0,6,0) <!--绘制横轴，这里的i=jd.length-->
Line(0,0,0,50) <!--绘制纵轴，两个点分别是(10,140)和(10，50)-->
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -