javascript+DHTML(2)

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量442 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript 图形 div html opera 文档

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm网址不错。

javascript + DHTMl 画图（二）

★ 怎样使用这个矢量图形库？

1 ．包含这个库
插入下面的代码到你的 html 文件的开头部分（在 <head> 和 </head> 之间）：
 
<script type="text/javascript" src="wz_jsgraphics.js"></script>
 
2 ．使用层（ div 或 layer ）作为画布（ canvases ）
如果是当页面正被载入时，直接在 html 页面中绘制，那么这个步骤不是必须的。
如果在页面加载完成后绘制，应该设置几个具有绝对坐标的层，作为你的画布，每一个层应该有一个唯一的 id:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>
 
3 ．下载并保存这个图形库
到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下 载，将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中，如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下，记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。
 

★ 怎样使用这个矢量图形库中的绘制函数？
1 ． 创建一个 jsGraphics 对象
a) 在页面完全载入后绘制：
（这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行）
还 记得前面用 div 元素创建的画布吗？看下面的示例， 需要为 div 创建相应的 jsGraphics 对象，这些代码必须插入到相关的 div 元素结束标志 </div> 后面， 但必须在 </body> 的前面， div 元素的 id 作为 new jsGraphics(); 的构造参数，像下面这样：
<script type="text/javascript">
<!--

var jg = new jsGraphics("myCanvas");

//-->
</script>
如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：
<script type="text/javascript">
<!--

var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

//-->
</script>
 
b ）在页面载入的时候绘制
（在 Netscape 4 和 Opera 5/6 可以执行）
只需要将构造参数设为空：
 
<script type="text/javascript">
<!--

var jg_doc = new jsGraphics();

//-->
</script>
你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。
 
  

2. 图形绘制函数
为确保所有浏览器能正确执行， 这里选择页面载入时进行绘制，即上文的 b 方式
一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：
 
<script type="text/javascript">
<!--
function myDrawFunction()
{
jg_doc.setColor("#00ff00"); // 选择绿色
jg_doc.fillEllipse(100, 200, 100, 180); // 坐标点相对于文档 (document)
jg_doc.setColor("maroon");
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
jg_doc.paint(); // 注意：直接在文档上绘制，而不与某个 div 关联 ,

jg.setColor("#ff0000"); // 选择红色
jg.drawLine(10, 113, 220, 55); // 坐标点相对于 div 元素 "myCanvas"
jg.setColor("#0000ff"); // 选择蓝色
jg.fillRect(110, 120, 30, 60);
jg.paint();

jg2.setColor("#0000ff"); // 选择蓝色
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();
}

var jg_doc = new jsGraphics(); // 直接在文档上绘制
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

myDrawFunction();

//-->
</script>

xiaoxiru
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript+DHTML+CSS
06-30
JavaScript、DHTML和CSS是构建动态、交互式Web页面的核心技术。这三者结合使用，可以为用户带来丰富的用户体验和高度可定制的界面设计。 **JavaScript** 是一种轻量级的脚本语言，广泛应用于客户端的网页开发。它...
JavaScript+DHTML语法与范例详解词典
04-07
2. 层（Layer）：DHTML允许创建可移动和可调整大小的独立内容区域，这些层可以通过JavaScript进行控制。 3. 时间线和动画：通过JavaScript，可以实现基于时间的动画效果，如淡入淡出、滑动等。 4. 事件处理：DHTML...
用Javascript和DHTML构建的矢量图形库
Chenxinyi's Weblog
04-16 4820
序：在 http://www.sitepoint.com/上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页
JAVASCRIPT+DHTML实现表格拖动
汉克的专栏
08-11 2885
本文系作者原创,如要转贴,请保留以下信息:http://blog.csdn.net/hunkdong/archive/2005/08/11/451169.aspx 自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂,要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着! 代码如下:    body{               font-siz
【爬虫学习笔记day23】3.1. 动态HTML介绍+JavaScript +jQuery +Ajax+DHTML
汪雯琦的博客
01-29 253
文章目录3.1. 动态HTML介绍JavaScriptjQueryAjaxDHTML那么，如何搞定？ 3.1. 动态HTML介绍 JavaScript JavaScript 是网络上最常用也是支持者最多的客户端脚本语言。它可以收集 用户的跟踪数据,不需要重载页面直接提交表单，在页面嵌入多媒体文件，甚至运行网页游戏。 我们可以在网页源代码的<scripy>标签里看到，比如： <s...
javascript+DHTML 画图（1）
wyaspnet的专栏
04-27 1391
javascript + DHTMl 画图(一) 该图形库使用了 DHTML 和 Javascript 技术，它可以画线，圆，椭圆，折线，多边形，矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的，另外，使用这个图形库画出的图形是完全被优化到像素级的！★ 性能（ Performance ） 在 HTML 中并没有提供类似于线、圆、椭圆或其它非矩形
javascript + DHTMl 画图（3）
wyaspnet的专栏
04-27 684
javascript + DHTMl 画图（三） 开始画时应首先选择画笔颜色，否则，画 笔的颜色取默认值－黑色。坐标值作为绘制图形方法的参数，如果采用上文的 a 方式构造图形对象，那么坐标值是相对于 div 元素的左上角的。每一个画布（图形对象），它的 paint 方法必须被显示的调用以产生 html 格式的图形，否则，在你的屏幕上什么都不会发生。
JavaScript_DHTML
Jie_Never_say_die的博客
11-29 275
1  DHTML 1.1    什么是DHTML DHTML: Dynamic HTML动态的HTML, 这门技术并不是一门新的技术, 而是将我们之前所学的HTML、CSS、JavaScript整合在一起，利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为.   1.2    DHTML的原理 在DHTML中, 将所有的HTML元素都使用一个一个的JS对象来进行
javascript & DHTML cookbook摘抄
hanekawa的博客
02-28 502
1，用于快速数组查询的模拟哈希表 for(var i = 0 ;i<employeeDB.length;i++){ employeeDB[employeeDB[i].name] = employeeDB[i]; } var JeansAge = employeeDB["Jean"].age; var sales = new Array(); sales[sales.length] =
[转帖]javascript + DHTMl 画图
hubingbin的专栏
02-25 1351
CSDN - 文档中心 - Javascript 阅读：11689   评论： 8    参与评论 标题  用Javascript和DHTML构建的矢量图形库     选择自 yjgx007 的 Blog 关键字  Javascript DHTML 矢量图出处  http://www.walterzorn.
javaScript+DHTML中文参考文档
09-01
JavaScript 和 DHTML 是 web 开发中的重要技术，它们在创建动态和交互性的网页内容方面起着关键作用。本文将深入探讨这两个概念以及它们在实际应用中的相关知识点。 首先，JavaScript 是一种轻量级的解释型编程语言...
JavaScript+DHTML语法与范例详解词典.zip
03-29
JavaScript 和 DHTML 是 web 开发中的重要技术，它们在创建动态、交互式的网页内容方面起着关键作用。在这个“JavaScript+DHTML语法与范例详解词典”中，我们可以深入探讨这两个领域的核心概念和实际应用。 ...
《JavaScript+DHTML语法与范例详解词典》源码
02-01
此为《JavaScript+DHTML语法与范例详解词典》一书的源码. 内容简介 《JavaScript+DHTML语法与范例详解词典》词条包含的主要内容有JavaScript的全局函数和基础对象的函数和属性；如何通过JavaScript DOM对象来动态地...
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 246
原生WebSocket： new WebSocket。
Webkit简介以及工作流程
读心悦
07-10 319
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 248
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 311
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 193
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
[IT/计算机]javascrit DOM元素应用及总结总结.doc
06-11
"本文档主要探讨JavaScript在DOM元素应用中的技巧和总结，涉及DHTML、HTML4.0、CSS和DOM等关键概念，以及JavaScript如何通过DOM操作HTML元素实现动态效果。" 在Web开发中，DHTML（Dynamic HTML）是一个重要的概念，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值