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 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><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
}
========================
分享到：
相关推荐
在本主题中，我们将深入探讨如何使用JavaScript在网页中实现画线的效果。这个压缩包"javascript经典特效---在页面中画线.rar"包含了具体实现这一特效的HTML文件——"在页面中画线.htm"。 在网页上画线涉及到的主要...
threejs实时画线 鼠标左键添加点 鼠标右键回退 按住shift键画平行x轴或平行z轴的线 按ESC结束画线
Excanvas是Google推出的一个JavaScript库，它为不支持HTML5 Canvas元素的老版IE浏览器提供了一个兼容解决方案。...通过学习和实践Excanvas，你可以掌握在任何浏览器环境下使用JavaScript进行画线和其他图形操作的技术。
在JavaScript编程中，实现鼠标画线功能是一项常见的交互设计需求，尤其在图形编辑、绘图应用或者游戏开发中。这个“js 鼠标画线 兼容主流浏览器”的项目显然是为了提供一个能够跨浏览器工作的解决方案，确保在IE7及...
纯js画曲线功能，当有数据时，替换数据即可
一款基于prototype.js的网页画线插件，画曲线图插件，使用本插件可在网页上生成虚线、物理抛物线、正弦波曲线，数字信息曲线等各种线形。本开源包中仅包括插件代码，不带有示例，需要的可参考官方 网站的调用例子。
在这个主题中，我们将深入探讨如何利用JS来实现画图，包括画线条、多边形、艺术字以及加载和显示图片。这涉及到HTML5的Canvas API，一个强大的图形绘制工具，它提供了丰富的绘图方法。 **Canvas API** Canvas API是...
在Three.js这个强大的JavaScript 3D库中，创建带宽度线和动态连续的箭头线是一种常见的需求，尤其是在构建交互式3D场景时。本文将深入探讨如何利用Three.js实现这一功能。 首先，理解Three.js的基本概念至关重要。...
在本文中，我们将深入探讨如何使用three.js库创建符号线动画。three.js是一个基于WebGL的JavaScript库，用于在浏览器中构建3D图形。通过利用这个库，开发者能够实现复杂的3D场景，包括动态和交互式的线动画效果。 ...
在“59.（leaflet篇）leaflet动态画线.zip”这个压缩包中，我们聚焦于如何使用Leaflet来实现地图上的动态轨迹线绘制。这个教程可能包含了在 Leaflet 地图上实时更新路径线，比如车辆移动轨迹或者运动路线等场景的...
纯js实现鼠标移动轨迹线的绘制，回车轨迹回放。 操作说明：在窗口中任意位置点击鼠标，程序将在两点间画线; 并通过拟合曲线算法，对...工作原理：在页面中动态添加div块的方式，模拟画线。 作者邮箱：258385583@qq.com
ArcGIS API for JavaScript 实现identifyTask 画线选取元素
在这个"openlayers3画线功能例子"中，我们将深入探讨如何利用OpenLayers 3来实现地图上的线条绘制，包括直线和扇形图。 首先，要实现画线功能，我们需要在HTML文件中引入OpenLayers库的CDN链接或者本地文件。接着，...
在JavaScript（简称JS）编程中，创建一个带箭头的画线程序是一项常见的需求，尤其在实现工作流或流程图的交互式展示时。本文将深入探讨如何利用JS实现这样的功能，以及它在工作流程序中的应用。 首先，我们要了解...
在ASP.NET中，"页面画线"通常是指在网页上绘制线条或图形，这涉及到HTML、CSS和JavaScript的基础，以及可能的服务器端编程技术。在Web开发中，我们可以通过多种方式实现这一功能，包括纯前端技术和结合服务器端控件...
JavaScript编写期货web端行情列表和K线显示、画线等功能
在这个例子中，我们将探讨如何在网页上实现画线，这是一个很常见的需求，无论是为了创建图表、设计简单的游戏还是实现用户交互。 首先，我们需要理解网页画线的基本原理。在网页中，我们通常使用HTML5的Canvas API...
在"高德地图画线，单条多条带方向示例"中，我们主要关注的是`AMap.Polyline`类，这是用来创建折线或直线的类，适用于表示路径或路线。 要实现在地图上画出一条线，首先需要在HTML中引入高德地图的JavaScript库，并...
在"绘制等值线的js例程"中，核心库conrec.js是一个用于绘制等值线的JavaScript模块。ConREC（Contour RECtangles）算法是该库实现等值线绘图的方法，它通过对数据网格进行细分，找出特定值的边界，然后用矩形路径...