社区
JavaScript
帖子详情
谁能给我一个画线的JS程序,高分相送
ly_88
2003-05-22 02:50:53
我需要在页面上鼠标所指的位置画一条从上到下贯穿整个页面的竖线,刚学JS还摸不着门道,请高手给一个例子,急用!
...全文
97
3
打赏
收藏
谁能给我一个画线的JS程序,高分相送
我需要在页面上鼠标所指的位置画一条从上到下贯穿整个页面的竖线,刚学JS还摸不着门道,请高手给一个例子,急用!
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
3 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
nice90
2003-05-22
打赏
举报
回复
mark
funboy88
2003-05-22
打赏
举报
回复
http://www.1000script.com/script/index.asp?typeid=17
JS作图
gq
2003-05-22
打赏
举报
回复
前辈所留
<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>
Leaflet地图开发必备文件包:精简
JS
库+配套CSS+全套默认图标资源
本文介绍
一个
专为前端开发者优化的Leaflet地图资源包,包含压缩版与源码版
JS
、适配移动端的CSS、全套官方默认图标(含
高分
屏双倍图),严格遵循Leaflet v1.9.4标准路径。支持Geo
JS
ON解析、点线面渲染、缩放拖拽等核心交互,体积仅42KB,无需配置即可集成至原生HTML、Vue或React项目。重点解决图标404、移动端适配、性能瓶颈及内存泄漏等实战问题。
SVG+anime.
js
实现弹性range滑块:高性能微交互方案
本文详解如何使用SVG与anime.
js
构建高性能、可访问的弹性range滑块。核心包括三层分离架构(语义层input、视觉层SVG轨道/滑块、控制层
JS
动画驱动),贝塞尔曲线建模轨道,查找表映射value与坐标,以及anime.
js
弹性缓动参数调优。方案规避CSS动画局限与Canvas性能瓶颈,兼顾无障碍、响应式与多实例复用。
探索CornerstoneToolsExample:医学影像交互与分析的强大工具
CornerstoneToolsExample是基于Cornerstone.
js
的示例项目,用于Web应用中医学影像交互与分析。它支持DICOM格式,有强大图像显示等功能,具备交互性、性能优化等特点。适用于远程诊断、教学研究等场景,易用、可定制、跨平台,值得开发者尝试。
Unity跨平台PDF生成实战:基于HTML/
js
PDF的数据导出方案
本文详解Unity中实现跨平台PDF生成的两种核心路径:基于.NET库的PC/主机方案(如iTextSharp、PdfSharp)与基于HTML/CSS+
js
PDF的真正跨平台方案。重点剖析后者在WebGL及Standalone平台的实战集成,涵盖HTML模板构建、C#与
JS
通信、中文字体处理(推荐html2canvas图片化)、截图性能优化及多页生成等关键技术点,并指出服务端生成等进阶方向。
从数字显示到生成艺术:硬件与代码融合的创意实现
本文系统阐述基于Arduino/ESP32等微控制器实现生成式数字艺术装置的技术路径,涵盖数字显示(LED矩阵、机械翻页)、数字实体(3D打印雕塑、交互装置)与生成过程(p5.
js
/Processing算法、AI提示词驱动)三层内涵;重点解析硬件选型(WS2812B、ESP32)、驱动开发(FastLED、NTP同步)、生成算法集成及电源/信号稳定性等关键技术要点,强调模块化开发、分步验证与跨学科融合。
JavaScript
87,988
社区成员
224,683
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章