JS中画线

最新推荐文章于 2023-07-04 19:15:40 发布
最新推荐文章于 2023-07-04 19:15:40 发布
阅读量694 收藏
点赞数
文章标签： 360
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rj0511/article/details/83925765
版权
html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> emu 's paint without vlm </title>
</head>

<SCRIPT LANGUAGE= "JavaScript">
<!--
function testDrawCurve()
{
document.getElementById('div1').innerHTML = drawCurve();
}
function testDrawArc()
{
document.getElementById('div1').innerHTML =drawArc(150,150,100,0,270, "viloet")
}
function testDrawCircle()
{
document.getElementById('div1').innerHTML = drawCircle(200,200,150, "blue");
}
function drawCircle(x0,y0,radius,color)
{
return drawArc(x0,y0,radius,0,360,color)
}
function testDrawLine()
{
document.getElementById('div1').innerHTML = drawLine(100,200,500,200, "yellow")+drawLine(300,100,300,400, "black")+drawLine(600,400,100,100, "violet")+drawLine(10,50,300,200, "red");
alert(drawLine(10,50,300,200, "red"));
}
function testDrawRectangle()
{
document.getElementById('div1').innerHTML = drawRectangle(200,100,600,200, "blue")+drawRectangle(100,200,400,500, "red")
}
function testDrawPie()
{
document.getElementById('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>
<button οnclick="testDrawCurve();"> 画曲线 </button>
<button οnclick= "testDrawArc();"> 画弧线 </button>
<button οnclick="testDrawCircle();"> 画圆 </button>
<button οnclick="testDrawLine();"> 画线 </button>
<button οnclick="testDrawRectangle();"> 画矩形 </button>
<button οnclick="testDrawPie();"> 画饼图 </button>
<div id=div1><table style='top:50.15;left:10.88;position:absolute'><td bgcolor=red height=1></td></table></div>

</body>
</html>

========================
//改div画线...
function drawLine(x0,y0,x1,y1,color){

var rs =" ";
if(y0 == y1) //画横线
{
rs = " <div style= 'background-color:"+color+ ";height:1;width:"+Math.abs(x1-x0)+";top: "+y0+ ";left: "+x0+ ";position:absolute;line-height: 1px; overflow: hidden;'></div>";
//<div style='width:1px;height:1px;top:50;left:10;position:absolute;background-color:red; line-height: 1px; overflow: hidden;'>

}
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> ";
rs = " <div style= 'background-color:"+color+ ";width:1;height:"+Math.abs(y1-y0)+";top: "+y0+ ";left: "+x0+ ";position:absolute;line-height: 1px; overflow: hidden;'></div>";
}
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] = " <div style= 'width:1px;height:1px;top: "+py+ ";left: "+px+ ";position:absolute;background-color:"+color+";line-height: 1px; overflow: hidden;'></div> ";
}
rs = rs.join(" ");
}
return rs
}
========================
rj0511
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现绘制圆弧（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 194
JavaScript实现绘制圆弧（附完整源码）
js利用div背景，做一个竖线的效果。
01-21
后来发现，如果div样式，如果设置了具体的高度，无论ie还ff，都能正常的表现。 但这个高度并不是固定的，而是会随着旁边div内容的多少而变化。最后，只好借助javascript，加载时捕获有关的div的高度，将其赋值给指定的div样式，终于看到了想要的东西。 具体脚本是这样的： [removed]=function(){ document.getElementById(‘bg’).style.height=document.getElementById(‘mydiv’).offsetHeight+’px’; } “bg”是要更改高度的div，“mydiv”是相关要参照的div。 最后
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 4046
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
Javascript绘制表格斜线实现课程表效果
Java Java
09-01 910
在利用HTML设计客户端表格界面时，表头左上角有时候可能要实现类似课程表加斜线的效果，以便指明横栏和竖栏的名称。[b]Graphics capabilities for JavaScript[/b]是一个矢量绘制基本图形的Javascript库，利用它，你可以在页面中绘制线段，圆，椭圆，方形，星状图甚至饼图。 使用它也非常简单，首先在HTML的head中引用其提供的js文件，然后在要绘制图形...
js在字符串中间插入横线
qq_51538602的博客
06-14 2542
js在字符串中间插入横线var str="202011"const addDashes = str => str.replace(/^(.{4})/, '$1-') //匹配年份后面加一横杠var str1 = addDashes(str);console.log(‘结果是：’，str1) // 结果是：2020-11
js实现两点之间画线的方法
12-10
在JavaScript中，实现两点之间画线的方法通常涉及到HTML5的Canvas API或者利用DOM元素来模拟线条效果。在这个实例中，作者使用的是后者，通过创建和定位DOM元素来模拟两点之间的折线。以下是对这个实例的详细解析： ...
JS画线(实例代码)
12-10
IE下画线 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:...
three.js符号线动画
04-23
在本文中，我们将深入探讨如何使用three.js库创建符号线动画。three.js是一个基于WebGL的JavaScript库，用于在浏览器中构建3D图形。通过利用这个库，开发者能够实现复杂的3D场景，包括动态和交互式的线动画效果。 ...
javascript经典特效---在页面中画线.rar
03-06
在本主题中，我们将深入探讨如何使用JavaScript在网页中实现画线的效果。这个压缩包"javascript经典特效---在页面中画线.rar"包含了具体实现这一特效的HTML文件——"在页面中画线.htm"。 在网页上画线涉及到的主要...
javascript 画图 直线
Musiccn的专栏
11-30 3059
用javascript 画直线的文章网上有一些，但很多都不太清楚，我仔细弄了一下，把认为基本成熟的程序公布在下面，希望能对大家有个参考，有兴趣可以共同交流，MSN: wwg_cn@msn.comvar sX = 0;var sY = 0;var eX = 0;var eY = 0;var slope = 0;function print(str){body.insertAdjacentHTML(
table中做连接线
止境
10-11 2267
首先先看一下效果，这是在在table中制作的连接线的样子（图为11选5号码走势图中的一部分）。 首先先创建一个js文件。 该JS中是利用DrawLine来做连接线，当然需要在HTML中td标签中的的id来标记，需要做连接线的位置。 var FFLine = function(lColor,lWidth){ this.color = lColor; this.wid
JS实现：纵向表格，且可在当前行下方添加一行
披甲上战场的博客
04-10 4258
常规的表格是这样的 … 客户的需求是这样的 … 一些固定项目自动带出，可修改；想在哪项下面加一行就在哪里加一行，想删除哪行就删除哪行。就要竖着的表格，不要横着的。如下图： 例如：在身高那一行下方想加一个 胸围 100cm ，就点击“在下方添加行” 于是在下方出现一行空行 实现过程 一、纵向表格部分 java后端——备好数据的过程 注意事项 以上前端代码主体是谁？假设是 form （spri...
【JS案例】——原生JS绘制表格及操作单元格
m0_50785976的博客
09-21 1815
原生JS绘制表格以及操作单元格
js画线
weixin_34233679的博客
07-10 243
&lt;body&gt; &lt;div id="main"&gt; &lt;/div&gt; &lt;div id="fd" style="filter:alpha(opacity=100);opacity:1;position: absolute;text-align: center; z-index:9999; width: 100px; height: 7...
js中单竖杠‘|‘的的使用方法
qq_44535325的博客
03-09 1315
​ 起初看到的时候，对单竖杠运算符’|‘不太理解，于是就在网上搜了一下，搜到的答案就好像是一个人写的，都是只介绍说，单竖杠’|‘可以用来取整运算，只保留整数部分。于是我就去找了一下朋友问一下，朋友一语点醒梦中人，说单竖杠’|'并不是相加，而是二进制去位或，这样的解释的话，就不会有问题了。​ 看到这里的时候，前两个用二进制相加是没有问题的，但是到’4|4’的时候，就让人不得其解了，因为二进制相加的4|4明明是8，怎么会是4；理到这里，才算浅浅明白单竖杠’|'的使用，记录下来，以防下次迷糊！
ThreeJS之画线（Drawing lines）
BinParker的博客
03-14 933
线是画在每一对连续的顶点之间的，而不是在第一个顶点和最后一个顶点之间绘制线条（线条并未闭合）
工作中JavaScript实现日期加横杠
林威专栏
07-04 382
日期加横杆
js 实现画一条直线，根据鼠标点击
dxyzhbb的博客
02-27 2508
<!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; cha...
Three.js开发：粗线的画法
地理信息技术杂谈 博客，欢迎技术交流
06-28 1701
Three.js的开发中，画线时，使用THREE.Line或者THREE.LineSegments进行画线时，发现在材质中设置线的宽度并不起作用，在查阅Three.js的文档发现，以上方式，对应的是webgl中gl.LINE_STRIP 或者 gl.LINES，这在一些浏览器渲染时，并不起作用，所以，Three.js扩展了一个画粗线的方法，具体的使用方法如下： 相关的类库放在Three.js包的example中，首先引用相应的js文件 实现效果如下： 引用内容： https://github.com/mr
threejs 画线
最新发布
04-25
要使用Three.js来画线，你可以按照以下步骤进行操作： 1. 创建一个场景(Scene)对象，用于容纳所有的3D元素。 2. 创建一个相机(Camera)对象，用于定义观察者的视角和位置。 3. 创建一个渲染器(Renderer)对象，用于将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值