这个中秋有点伤感。散点代码。

emu 2002-09-21 05:02:56
今天中秋。给初恋女友打了个电话问候一声，却发现她半个月前结婚了。

虽然分手已经快10年了，可是心情还是很坏。毕竟是初恋，很多事情总是难以忘怀。

贴一点脚本，是不使用vml在网页上画图的代码，虽然在这个vml满天飞的时候，用处已经不大了，不过改改应该也可以用到netscape上，说不定有人会需要。顺便散一点分。祝大家中秋快乐。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>emu's paint without vlm</title>
</head>
<body>
<button onclick="testDrawCurve()">画曲线</button>
<button onclick="testDrawArc()">画弧线</button>
<button onclick="testDrawCircle()">画圆</button>
<button onclick="testDrawLine()">画线</button>
<button onclick="testDrawRectangle()">画矩形</button>
<button onclick="testDrawPie()">画饼图</button>
<div id=div1></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function testDrawCurve()
{
div1.innerHTML = drawCurve();
}
function testDrawArc()
{
div1.innerHTML =drawArc(150,150,100,0,270,"viloet")
}
function testDrawCircle()
{
div1.innerHTML = drawCircle(200,200,150,"blue");
}
function drawCircle(x0,y0,radius,color)
{
return drawArc(x0,y0,radius,0,360,color)
}
function testDrawLine()
{
div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
}
function testDrawRectangle()
{
div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
}
function testDrawPie()
{
div1.innerHTML = drawPie(300,200,120,0,45,"red");
}

function drawLine(x0,y0,x1,y1,color)
{
var rs = "";
if (y0 == y1) //画横线
{
rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" height=3 width="+Math.abs(x1-x0)+"></td></table>";
}
else if (x0 == x1) //画竖线
{
rs = "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width=1 height="+Math.abs(y1-y0)+"></td></table>";
}
else
{
var lx = x1-x0
var ly = y1-y0
var l = Math.sqrt(lx*lx+ly*ly)
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = x0 + lx*p;
var py = y0 + ly*p;
rs[rs.length] = "<table style='top:"+py+";left:"+px+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
}
rs = rs.join("");
}
return rs
}
function drawRectangle(x0,y0,x1,y1,color)
{
if (x0 == x1 || y0 == y1) return;
if (x0>x1) {var t=x0;x0=x1;x1=t}
if (y0>y1) {var t=y0;y0=y1;y1=t}
return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>";
}
function drawPie(x0,y0,radius,startAngle,endAngle,color)
{
var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
var startx=Math.sin(startAngle)*radius+x0;
var endx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var endy=Math.cos(endAngle)*radius+y0;
rs += drawLine(x0,y0,startx,starty,color)
rs += drawLine(x0,y0,endx,endy,color)
return rs;
}
function drawArc(x0,y0,radius,startAngle,endAngle,color)
{
rs = new Array();
tmpar = new Array();
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
for (var i=startAngle;i<endAngle;i+=(1/radius))
{
var dx = Math.sin(i)*radius+x0;
var dy = Math.cos(i)*radius+y0;
rs[rs.length] = "<table style='top:"+dy+";left:"+dx+";position:absolute'><td bgcolor="+color+" height=3></td></table>";
}
return (rs.join(""));
}
function drawCurve()
{
var rs = new Array();
for (var i=0;i<2*Math.PI;i+=.02)
{
var x = 300-Math.sin(i)*100
var y = 300-Math.cos(i)*100
rs[rs.length] = "<table style='top:"+x+";left:"+(i*100+90)+";position:absolute'><td bgcolor=blue height=3></td></table>";
rs[rs.length] = "<table style='top:"+y+";left:"+(i*100+90)+";position:absolute'><td bgcolor=violet height=3></td></table>";
}
return rs.join("");
}
//-->
</SCRIPT>
</body>
</html>

其中画饼图的那一块的填充算法我没有想出来。哪位高手看到了补充一下。
...全文
28 77 打赏 收藏 转发到动态 举报
写回复
用AI写文章
77 条回复
切换为时间正序
请发表友善的回复…
发表回复
wealth 2003-02-22
  • 打赏
  • 举报
 回复
up
emu 2003-02-22
  • 打赏
  • 举报
 回复
呵呵已经结了几百年的帖子了还UP干什么？
emu 2002-10-04
  • 打赏
  • 举报
 回复
那段代码的灵感来自meizz(梅花雨)的http://www.csdn.net/expert/topic/884/884501.xml?temp=.4106409
其实梅花雨的代码更好，但是我当时要用的时候没找到就自己写了一个。现在根据梅花雨的方法改了一下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>emu's paint without vlm</title>
</head>
<body>
<button onclick="testDrawCurve()">画曲线</button>
<button onclick="testDrawArc()">画弧线</button>
<button onclick="testDrawCircle()">画圆</button>
<button onclick="testDrawLine()">画线</button>
<button onclick="testDrawRectangle()">画矩形</button>
<button onclick="testDrawPie()">画饼图</button>
<div id=div1></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function testDrawCurve()
{
div1.innerHTML = drawCurve();
}
function testDrawArc()
{
div1.innerHTML =drawArc(150,150,100,0,270,"blue")
}
function testDrawCircle()
{
div1.innerHTML = drawCircle(200,200,150,"blue");
}
function drawCircle(x0,y0,radius,color)
{
return drawArc(x0,y0,radius,0,360,color)
}
function testDrawLine()
{
div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
}
function testDrawRectangle()
{
div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
}
function testDrawPie()
{
div1.innerHTML = drawPie(300,200,120,0,45,"red");
}

function drawLine(x0,y0,x1,y1,color)
{
var rs = "";
if (y0 == y1) //画横线
{
if (x0>x1){var t=x0;x0=x1;x1=t}
rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1; width:"+Math.abs(x1-x0)+"'></span>";
}
else if (x0 == x1) //画竖线
{
if (y0>y1){var t=y0;y0=y1;y1=t}
rs = "<span style='top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"'></span>";
}
else
{
var lx = x1-x0
var ly = y1-y0
var l = Math.sqrt(lx*lx+ly*ly)
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
rs[rs.length] = "<span style='top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
}
rs = rs.join("");
}
return rs
}
function drawRectangle(x0,y0,x1,y1,color)
{
if (x0 == x1 || y0 == y1) return;
if (x0>x1) {var t=x0;x0=x1;x1=t}
if (y0>y1) {var t=y0;y0=y1;y1=t}
return "<table style='top:"+y0+";left:"+x0+";position:absolute'><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>";
}
function drawPie(x0,y0,radius,startAngle,endAngle,color)
{
var rs = drawArc(x0,y0,radius,startAngle,endAngle,color)
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
var startx=Math.sin(startAngle)*radius+x0;
var endx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var endy=Math.cos(endAngle)*radius+y0;
rs += drawLine(x0,y0,startx,starty,color)
rs += drawLine(x0,y0,endx,endy,color)
return rs;
}
function drawArc(x0,y0,radius,startAngle,endAngle,color)
{
rs = new Array();
tmpar = new Array();
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
for (var i=startAngle;i<endAngle;i+=(1/radius))
{
var dx = parseInt(Math.sin(i)*radius+x0);
var dy = parseInt(Math.cos(i)*radius+y0);
rs[rs.length] = "<span style='top:"+dy+";left:"+dx+";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"'></span>";
}
return (rs.join(""));
}
function drawCurve()
{
var rs = new Array();
for (var i=0;i<2*Math.PI;i+=.01)
{
var x = parseInt(300-Math.sin(i)*100)
var y = parseInt(300-Math.cos(i)*100)
rs[rs.length] = "<span style='top:"+x+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
rs[rs.length] = "<span style='top:"+y+";left:"+(i*100+90)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue'></span>";
}
return rs.join("");
}
//-->
</SCRIPT>
</body>
</html>

潇洒 2002-10-04
  • 打赏
  • 举报
 回复
还没散完代码啊?
hui_feng 2002-10-04
  • 打赏
  • 举报
 回复
代码我要啦，谢谢。
sqsq999 2002-10-03
  • 打赏
  • 举报
 回复
没事！混分玩
xg_delayth 2002-10-02
  • 打赏
  • 举报
 回复
我当然敢去，自信有足够的风度，再说我和她是中学时代最要好的朋友（可惜不是那种）！同时也算是一种结局吧，给自己一个了断，同时也真心的祝福我爱过的人，愿她永远快乐！
angelfish 2002-09-29
  • 打赏
  • 举报
 回复
哎，
有以为这个中秋，我是最失意的。

emu 2002-09-29
  • 打赏
  • 举报
 回复
人家还敢请你去啊？你还敢去啊？

我可好，人家婚前给我打过一个电话，本来要跟我说的，临了还不敢说，结果过了半个月我才从别处打听到。
xg_delayth 2002-09-29
  • 打赏
  • 举报
 回复
先收着了，我去年去参加了我第一个喜欢女孩的婚礼！嘴上说着恭喜，心理鬼知道是怎么一种感受！
同是天涯沦落人，相逢何必曾相识！
qiuliang1979 2002-09-29
  • 打赏
  • 举报
 回复
好端端的过节伤什么心呀！
我都还没有女朋友呢？
马上要到国庆节了，总算有七天不要上班了，爽！
祝大家都有一个好心情！happy!
wealth 2002-09-29
  • 打赏
  • 举报
 回复
收藏！
meizz 2002-09-29
  • 打赏
  • 举报
 回复
兰波这小子他媚外了，跑到国外的一个ASP论坛里开荒去了。
ston，十一大假就要到了，你的心情也该放松一下了，笑一笑！！对，这就乖了嘛！
jin11 2002-09-29
  • 打赏
  • 举报
 回复
接分
emu 2002-09-29
  • 打赏
  • 举报
 回复
visualPaul：你写的基本上就是我原来写的代码，就是太耗资源了。
emu 2002-09-29
  • 打赏
  • 举报
 回复
meizz(梅花雨)：
呵呵，我正打算放松一下呢。可惜没办法去旅游。等什么时候又有钱又够闲了，一定把网友的位置一个个标在地图上然后出去到处打秋风。
smartzhang 2002-09-28
  • 打赏
  • 举报
 回复
接分了

人生难免不愉快

得过且过吧
emu 2002-09-28
  • 打赏
  • 举报
 回复
唉，又一失恋的。以后大伙失意了就过来散代码怎么样？
nightfeng 2002-09-27
  • 打赏
  • 举报
 回复
幸福的人总是相同的！
不幸的却各有各的不幸！
!_!
visualPaul 2002-09-27
  • 打赏
  • 举报
 回复
我觉得填充颜色可以用划直线来实现,但是运行太慢,划一个90度的饼图得2-3分钟,不知大家有什么别的高招.
另外,我觉得用<hr>代替<table>标签更好，更节省。

如下代码是画饼图的，只在drawArc()中加了一句（后有注释的）


<body id=graph>
<script>
function drawLine(x0,y0,x1,y1,color) {
var rs = "";
var lx = x1-x0;
var ly = y1-y0;
var l = Math.sqrt(lx*lx+ly*ly);
rs = new Array();
for (i=0;i<l;i++) {
var p = i/l;
var px = x0 + lx*p;
var py = y0 + ly*p;
rs[rs.length] = "<hr style='top:"+py+";left:"+px+";position:absolute;' noshade width='2' size='2' color="+color+">";
}
rs = rs.join("");
return rs
}

function drawPie(x0,y0,radius,sstartAngle,sendAngle,color)
{
var rs = drawArc(x0,y0,radius,sstartAngle,sendAngle,color)
startAngle = sstartAngle/360*Math.PI*2;
endAngle = sendAngle/360*Math.PI*2;
var startx=Math.sin(startAngle)*radius+x0;
var endx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var endy=Math.cos(endAngle)*radius+y0;
rs += drawLine(x0,y0,startx,starty,color)
rs += drawLine(x0,y0,endx,endy,color)
return rs;
}
function drawArc(x0,y0,radius,startAngle,endAngle,color)
{
rs = new Array();
tmpar = new Array();
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
for (var i=startAngle;i<endAngle;i+=(1/radius))
{
var dx = Math.sin(i)*radius+x0;
var dy = Math.cos(i)*radius+y0;
rs[rs.length] = "<hr style='top:"+dy+";left:"+dx+";position:absolute;' noshade width='2' size='3' color="+color+">"
+ drawLine(x0,y0,dx,dy,"red") //填充颜色实际上是在划直线

}
return (rs.join(""));
}

graph.innerHTML = drawPie(250,50,200,20,50,"blue");
</script>
加载更多回复（57）
可视化 | Pyecharts 单轴散点图（附完整代码）
Pyecharts 单轴散点图
可视化 | Python分析中秋月饼，这几种口味才是yyds
Pandas数据处理、Pyecharts数据可视化
python对月饼数据进行可视化，看看哪家最划算
嗨喽~大家好呀，这里是魔王呐 ! 中秋节，又称拜月节、月光诞、月夕等，节期在每年的农历八月十五日（九月十）。中秋节自古以来就有祭月、赏月、吃月饼、玩花灯、赏桂花、饮桂花酒等民俗，流传经久不息。马上有临近中秋，这不得好好准备~于是准备对月饼数据进行可视乎。
Python浪漫520表白代码
Python浪漫520表白合集，跳动的爱心，漂浮的爱心，无法拒绝的表白界面，满屏无限弹窗的表白界面，快来领取属于程序员的浪漫吧！
Pandas+Pyecharts | 20000+天猫订单数据可视化
单轴散点图、极坐标图探索天猫真实交易数据
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章