<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>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) //画横线
{
if (x0>x1){var t=x0;x0=x1;x1=t} //新加的判断
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) //画竖线
{
if (y0>y1){var t=y0;y0=y1;y1=t} //新加的判断
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>
分享到:
相关推荐
open flash chart--js画图形‘曲线等
早上无聊参照算法写了一个JS脚本的画图形的程序
Three.js 画图形、线条、文案、视频等等,IDEA导入即可使用
JavaScript画基本图形函数,包含两种实现方式:table方式和div方式。含详细的函数说明。
javascript Canvas图形绘制各类图形动画等示例
javascript图像、动画技术,小游戏示例代码,html5画布,phonegap
js绘制图形(扇形,折状图,柱状图),例子,js包,很全
本项目“基于SSM和Vue的画图形学程序”是为了探索和实现一个高效、灵活、用户友好的图形学应用,该应用结合了现代Web技术和传统图形处理理论。项目的目标是提供一个平台,让用户能够进行复杂图形的创建、编辑、保存...
一个JavaScript绘图和画画App
第6章讲解如何用JavaScript语言来实现精灵;第7章展示了如何在动画中模拟物理效果;第8章介绍了进行碰撞检测所用的技术;第9章以一个简单但是高效的游戏引擎开始,提供了游戏制作所需的全部支持功能;第10章讨论了...
Three.js 是一个强大的 JavaScript 库,用于在 Web 浏览器上创建和显示动画的 3D 图形。通过使用 WebGL,它允许开发者在没有依赖任何特定插件的情况下,在标准的 web 页面中呈现复杂的 3D 图形。Three.js 提供了一套...
Draw2d js图形库,画各种流程图,非常强大的javascript类图库。
Vue Konva是一个JavaScript库,用于使用Vue绘制复杂的画布图形。 它提供了声明性和React性绑定。 所有vue-konva组件都对应于具有前缀“ v-”的同名Konva组件。 可用于Konva对象的所有参数都可以在config中作为...
主要介绍了原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
百度地图js版api几何图形绘制保存到数据库并展示,如何绘制大神们代码已经有了,
vivus, 在SVG上,使用JavaScript库制作图形动画 vivus.js在 http://maxwellito.github.io/vivus 演示。在 Vivus即时游戏中使用它。Vivus是一个轻量级的JavaScript类( 没有依赖关系),允许你对SVGs进行动画处理,使它...
第6章讲解如何用JavaScript语言来实现精灵;第7章展示了如何在动画中模拟物理效果;第8章介绍了进行碰撞检测所用的技术;第 9章以一个简单但是高效的游戏引擎开始,提供了游戏制作所需的全部支持功能:第10章讨论了...
本项目采用SSM(Spring、SpringMVC、MyBatis)框架和VUE前端技术,开发一个高效、可扩展的画图形学应用系统。该系统旨在提供一个可视化的界面,使用户能够轻松创建、编辑、保存和分享图形作品,同时加深用户对图形学...
vue结合D3.js做的动态的可交互的SVG图形组件。 下面是其中的几行代码: data: { svg: undefined, point1Instance: undefined, // 两个主要端点之一 point2Instance: undefined, // 两个主要端点之一 ...
常见的库包括 jQuery、Anime.js、GreenSock(GSAP)等,它们提供了丰富的动画函数和效果,使动画开发更加高效。 SVG 动画:使用 SVG(可缩放矢量图形)和 SMIL(同步多媒体集成语言)技术创建矢量图形动画,可以...