- 浏览: 102196 次
- 性别:
- 来自: 北京
文章分类
最新评论
用dhtml和javascript画矢量图的英文版
German version
<script type="text/javascript">
<!--
var no_dhtm = (document.layers || window.opera && !document.defaultView);
function ZOOM()
{
if (document.body && document.body.style && typeof document.body.style.zoom != "undefined")
{
if (document.body.style.zoom=="400%")
document.body.style.zoom = "100%";
else
{
document.body.style.zoom = "400%";
alert('You/'ve doubleclicked on the document./nDoubleclick again to unzoom.');
}
}
}
document.ondblclick=ZOOM;
function DRAW(shape)
{
if (jg_n4 || window.opera && !document.defaultView)
{
alert('In Netscape 4 and Opera < version 7, the functionality/n"Draw into a canvas, even after the page has fully loaded" isn/'t available./nThese browsers can only draw directly into the document/nwhile the page is parsed.');
return;
}
if (window.event) event.cancelBubble = true;
var f=document.forms[0];
var color = ''+f.Color.value;
for (var z = 0; z<color.length; z++)
if (isNaN(parseInt(color.charAt(z), 16)))
color = color.substring(0, z) + '6' + color.substring(z+1);
var t0 = (new Date()).getTime();
jg2.setColor("#"+color);
jg2.setStroke(f.Dotted.checked? Stroke.DOTTED : parseInt(f.Stroke.value));
if (shape=="drawLine()")
jg2.drawLine(parseInt(f.dl_x1.value), parseInt(f.dl_y1.value), parseInt(f.dl_x2.value), parseInt(f.dl_y2.value));
else if (shape=="drawRect()")
jg2.drawRect(parseInt(f.dr_x.value), parseInt(f.dr_y.value), parseInt(f.dr_w.value), parseInt(f.dr_h.value));
else if(shape=="fillRect()")
jg2.fillRect(parseInt(f.fr_x.value), parseInt(f.fr_y.value), parseInt(f.fr_w.value), parseInt(f.fr_h.value));
else if(shape=="drawEllipse()")
jg2.drawEllipse(parseInt(f.do_x.value), parseInt(f.do_y.value), parseInt(f.do_w.value), parseInt(f.do_h.value));
else if(shape=="fillEllipse()")
jg2.fillEllipse(parseInt(f.fo_x.value), parseInt(f.fo_y.value), parseInt(f.fo_w.value), parseInt(f.fo_h.value));
else if(shape=="fillPolygon()")
{
var pgx = f.fp_x.value.split(',');
var pgy = f.fp_y.value.split(',');
var comm = '/n /nNote:/nValues must be separated with commas from each other.';
if (pgx.length!=pgy.length) alert('The number of x und y values must be equal.'+comm);
else
{
for (var z = 0; z<pgx.length; z++)
{
if (isNaN(pgx[z] = parseInt(pgx[z])) || isNaN(pgy[z] = parseInt(pgy[z])))
{
alert('Invalid x or y value.'+comm);
return;
}
}
jg2.fillPolygon(pgx, pgy);
}
}
jg2.paint();
var t1 = (new Date()).getTime() - t0;
jg3.clear();
jg3.setColor('#'+color);
jg3.setFont('verdana,geneva,sans-serif', '12px', Font.BOLD);
jg3.drawString(t1 + ' milliseconds', 0, 10);
jg3.paint();
}
var jg2=new jsGraphics("test");
var jg3 = new jsGraphics("dt");
function D()
{
var wc = (window.innerWidth? innerWidth
: (document.documentElement && document.documentElement.clientWidth)? document.documentElement.clientWidth
: (document.body && document.body.clientWidth)? document.body.clientWidth
: document.getElementsByTagName? document.getElementsByTagName('body')[0].offsetWidth
: 800) >>1;
var dy = no_dhtm? 115 : 0;
var jg = new jsGraphics(no_dhtm? null : "main");
jg.setColor("#ff9900");
jg.setFont("arial,helvetica,sans-serif", "11px", Font.PLAIN);
jg.drawString("<nobr>.drawEllipse( )<//nobr>",35, 180+dy);
jg.drawLine(62, 197+dy, 48, 234+dy);
jg.drawLine(48, 234+dy, 45, 224+dy);
jg.drawLine(49, 234+dy, 57, 228+dy);
jg.drawEllipse(16, 240+dy, 59, 130);
jg.setColor("#008800");
jg.drawOval((250+wc+300)>>1, 4+dy, 64, 64);
jg.drawString("These are not image files.<br>Shapes & text have been dynamically drawn with wz_jsgraphics.js.", ((wc+280)>>1)-60, 190+dy);
jg.setColor("#ff0099");
jg.drawLine(120, -60+dy, 265, 150+dy);
jg.drawString("<nobr>.drawLine( )<//nobr>", 190, 145+dy);
var polylx=new Array(420, ((wc+280)>>1)+250, ((wc+280)>>1)+120, (wc<<1)-100);
var polyly=new Array(160+dy, 110+dy, 350+dy, 450+dy);
jg.drawPolyline(polylx, polyly);
jg.drawString(".drawPolyline( )", ((wc+280)>>1)+126, 155+dy);
jg.setColor("#ffddaa");
jg.setStroke(5);
jg.drawPolygon(new Array(379, 385, 391, 410, 391, 385, 379, 360), new Array(19+dy, 0+dy, 19+dy, 25+dy, 31+dy, 50+dy, 31+dy, 25+dy));
jg.setStroke(1);
var polygx=new Array(177, 247, 115);
var polygy=new Array(24+dy, 45+dy, 140+dy);
jg.setColor("#0000cc");
jg.drawPolygon(polygx, polygy);
jg.drawString(".drawPolygon( )", 256, 30+dy);
jg.drawString(".fillEllipse( )", wc+214, 200+dy);
jg.setColor("#990099");
jg.drawRect(wc+280, dy, 40, 50);
jg.setStroke(Stroke.DOTTED);
jg.drawEllipse(wc+250, dy+86, 48, 60);
jg.setStroke(1);
jg.drawString("<nobr>.drawRect( )<//nobr>", wc+210, 20+dy);
jg.setColor("#ccddff");
jg.setStroke(5);
jg.drawOval(300, 110+dy, 80, 50);
jg.setStroke(1);
jg.fillEllipse(wc+285, 190+dy, 70, 40);
jg.fillOval(wc+292, 36+dy, 15, 15);
jg.setColor("#990099");
jg.drawOval(wc+292, 36+dy, 14, 14);
jg.setColor("#000033");
jg.fillRect(wc+295, 41+dy, 2, 2);
jg.fillRect(wc+302, 41+dy, 2, 2);
jg.drawLine(wc+295, 45+dy, wc+296, 46+dy);
jg.drawLine(wc+297, 47+dy, wc+301, 47+dy);
jg.drawLine(wc+301, 47+dy, wc+303, 45+dy);
jg.paint();
}
if(document.all && !document.getElementById)
{
window.onload = function()
{
window.setTimeout("D();", 100);
}
}
else D();
//-->
</script><!--script type="text/javascript" src="../scripts/wz_dragdrop.js"></script>
<script language="JavaScript" type="text/javascript">
<!-
SET_DHTML(CURSOR_MOVE, KEYDOWN_RESIZE, "test", "stairsdemo");
//->
</script-->
Home | DHTML-Drag&Drop-Library | Tooltips | Function-Grapher |
<nobr>.drawEllipse()</nobr>
These are not image files.
Shapes & text have been dynamically drawn with wz_jsgraphics.js.
Shapes & text have been dynamically drawn with wz_jsgraphics.js.
<nobr>.drawLine()</nobr>
.drawPolyline()
.drawPolygon()
.fillEllipse()
<nobr>.drawRect()</nobr>
|
|
|
|
Walter Zorn, Munich, 2005 visitors on www.walterzorn.com since 27. 12. 2002 |
相关推荐
DHTML&javascript 使用手册 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考...
通过JavaScript操作canvas元素的API,开发者可以直接在画布上绘制路径、矩形、圆形等矢量图形,还可以实现图像的动态更新和动画效果。 - **SVG**:SVG是一种基于XML的矢量图形格式,与VML相比,SVG得到了更广泛的...
**VML网页矢量图** VML(Vector Markup Language)是用于在网页上绘制矢量图形的一种技术。DHTML手册可能会介绍如何创建、操作和动画化VML图形,以及如何与其他DHTML元素结合使用。 **命令标识符** 命令标识符...
HTML5是目前最新的版本,引入了许多新特性,如离线存储、音频/视频元素、Canvas画布、SVG矢量图以及新的表单控件等,极大地丰富了网页的展示效果和功能。 **DHTML:动态HTML** DHTML是在HTML基础上加入CSS...
1. **CSS**:负责网页的样式和布局,DHTML利用CSS实现了元素的动态定位和动画效果。 2. **DOM**:是HTML和XML文档的结构化表示,JavaScript可以通过DOM操作网页元素,实现动态更新内容。 3. **JavaScript**:提供了...
HTML5引入了许多新特性,如音频、视频、 canvas画布、SVG矢量图等,这些都为DHTML提供了更多动态元素的可能性。 **2. CSS参考** CSS用于控制网页的外观和布局,包括字体、颜色、布局、动画效果等。在DHTML中,CSS...
JVGL完全基于DHTML和JavaScript技术实现。DHTML是传统HTML的动态扩展,在JavaScript或VBScript的基础上提供了一个扩展的文档对象模型DOM,并允许在数据流关闭之后,由JavaScript或VBScript代碼来动态地改变Web页面的...
DHTML(Dynamic HTML),动态HTML,是HTML的一种增强技术,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model)等元素,使得网页内容能够实现动态交互和更新,无需页面刷新。本手册详细介绍了DHTML在...
4. **HTML5新特性**:DHTML也包括HTML5的新元素和API,如Canvas绘图、SVG矢量图、WebSocket实时通信等。 **CSS3.0参考手册** CSS3是CSS的最新版本,引入了许多新特性和增强。`css3.0参考手册.chm`可能包含: 1. *...
综上所述,DHTML参考手册是理解并应用这些技术的宝贵资源,它涵盖了从基础概念到高级技巧的各个方面,对于希望深入学习和使用DHTML的开发者来说非常有价值。尽管现代Web开发中已有了更多的选择,如React、Vue等框架...
JavaScript中文手册是一本详尽的资源,旨在帮助中文使用者深入理解和掌握JavaScript这门编程语言。JavaScript,有时简称为JS,是互联网上最广泛使用的客户端脚本语言,它主要用于增强网页的交互性和动态功能。这份...
SVG则是矢量图格式,支持高质量的图形和图像处理。 5. **Geolocation API**:HTML5提供了获取用户地理位置的能力,为地理位置相关的应用提供了便利。 6. **Web Workers和Web Storage**:Web Workers允许在后台执行...
Web 开发常用手册! 1 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 ...可视化滤镜和切换参考 HTML+TIME参考 网页矢量图形标记语言 HTML 应用程序 技巧 语言代码 颜色表
1. **DHTML**:DHTML是一种结合HTML、CSS、JavaScript和DOM(文档对象模型)的技术,用于创建交互式和动态的网页内容。它允许网页在不重新加载整个页面的情况下改变内容、样式和结构,实现如下拉菜单、滑动效果、...
YUI 工具包利用 DOM 脚本来简化浏览器内的开发(in-browser devolvement),使用 DHTML 和 AJAX 的特性开发所有的 Web 程序。YUI 控件库为您提供了一组高交互性性的可视化元素,这些元素完全在客户端创建维护,不...
在网页开发领域,DHTML(Dynamic HTML)是一种用于创建交互式和动态网页的技术,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model)来实现页面的动态效果。这份"DHTML标记大全、API文档"是网页开发者不...
网页制作完全手册 ...可视化滤镜和切换参考 HTML+TIME参考 网页矢量图形标记语言 HTML 应用程序 技巧 语言代码 颜色表 --------------------------------------------------------------------------------
- **Canvas** 和 **SVG**:提供图形绘制和矢量图像的能力。 **3. CSS(层叠样式表)** CSS负责网页的样式和布局,它与HTML分离,使页面设计更加灵活。关键概念包括: - **选择器**:如类选择器(`.class`)、ID...
至于“VML网页矢量图”,Vector Markup Language(VML)是一种用于在网页上显示矢量图形的标准,特别是在Internet Explorer较旧版本中广泛使用。尽管SVG(Scalable Vector Graphics)现在更被推崇,但理解VML对于...
资源中的那个无法下载,在网上找了一个,传上来,分享! 通过下列链接访问参考资料,可帮助你创建引人注目的 Web...可视化滤镜和切换参考 HTML+TIME参考 网页矢量图形标记语言 HTML 应用程序 技巧 语言代码 颜色表