社区
ASP
帖子详情
求救 《如何用javascript画矩形,能画吗?》
lfpalice
2003-10-19 09:18:05
如何用javascript画矩形,能画吗
...全文
103
6
打赏
收藏
求救 《如何用javascript画矩形,能画吗?》
如何用javascript画矩形,能画吗
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
6 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
lfpalice
2003-10-19
打赏
举报
回复
太谢谢你了,真想知道你是那位高手,哦我看见了,自己真傻
Gorgee
2003-10-19
打赏
举报
回复
<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>
Gorgee
2003-10-19
打赏
举报
回复
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
</head>
<body>
<v:roundrect strokecolor="black" fillcolor="white" style="position:relative;left:20;top:5;width:100px;height:40px;z-index:9">
<v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
<v:textbox id="memo" style="font-size:10pt;color:blue;line-height:18px" inset="1,1,1,1">Hello world!<br>Hello VML!</v:textbox>
</v:roundrect>
<v:oval strokecolor="black" fillcolor="white" style="position:relative;left:9;top:20;width:14px;height:10px;z-index:8">
<v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
</v:oval>
<v:oval strokecolor="black" fillcolor="white" style="position:relative;left:0;top:35;width:10px;height:8px;Z-index:7">
<v:shadow on="t" type="single" color="silver" offset="3pt,3pt"></v:shadow>
</v:oval>
<!--/v:group-->
</body>
</html>
lfpalice
2003-10-19
打赏
举报
回复
怎么画,有函数调用吧,我没找到,谢谢
lfpalice
2003-10-19
打赏
举报
回复
怎么画,又函数调用吧,我没找到,谢谢
qdubit
2003-10-19
打赏
举报
回复
可以画的。
javascript
小技巧
javascript
小技巧 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey ev
python 团体程序设计天梯赛L1合集(持续更新)
L1-013 计算阶乘和 L1-014 简单题 L1-015 跟奥巴马一起
画
方块 L1-016 查验身份证 L1-017 到底有多二 L1-018 大笨钟 L1-019 谁先倒 L1-020 帅到没朋友 L1-021 重要的话说三遍 L1-022 奇偶分家 L1-023 输出GPLT L1-024...
WEB开发文档2 总结
http://blog.donews.com/lvjiyong/archive/2006/06/29/931071.aspx 怎样将后台生成的在内存中的图象显示到客户端 Microsoft IE WebControls下载地址 如何在DATAGRID中使用
JAVASCRIPT
脚本控制 DataGrid中连接到...
Android界面特殊全汇总
Class TranslateAnimation 的使用:Animation 有两种定义方 法,一种是用 Java code,一种是用 XML,这里只介绍用 code 来定义(因为用 XML 来定义的那种我没用过。。嘿嘿。。)。多的不说,看代码。 这里...
ASP
28,390
社区成员
357,068
社区内容
发帖
与我相关
我的任务
ASP
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
复制链接
扫一扫
分享
社区描述
ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章