image对象 主讲人：傅伟玉
image对象 提供了装入图形的访问方法 image对象在HTML中使用 image对象在JavaScript中使用 <IMG NAME = "IMG1" SRC = "gif/image1.gif"> image对象在JavaScript中使用 image1 = new Image( ) image1.src = "gif/image1.gif" image对象 image对象提供了装入文档的图形的访问方法，image对象是document对象的子对象之一，引用它可以通过document对象进行，在HTML中定义一个<IMG>元素，可以给它命名，如name= “IMG1“，指定image对象的图形来源，如 SRC = ”gif/image1.gif“，也可以定义图形的高度，宽度以及图形的边界形式等。 在JavaScript中，通过image( )构造器先创建 image对象，如：image1 = new Image( ) ，再指定图形来源或其它属性，如：image1.src = “gif/image1.gif”，通过这种方式创建的图形对象不是Web页面原来的图形，它被存放在浏览器的缓冲区中，用于替换页面中已有的图形。
image对象属性和方法 属性 说明 border 边界属性值 complete 表示图形装入是否完成 height 对象的高度 hspace 水平边界属性 lowsrc 快速装入低分辨率图形 name image对象的名称 prototype 建立其它用户定义的属性 src image对象的图形源 vspace 垂直边界属性 width 对象的宽度 image对象属性和方法 上图为Navigator和Internet Explorer共有的image对象的属性。这些属性反映了<img>标志的属性。 border属性表示图形边框线粗细（象素数）。但是使用image( )构造器创建的图形边框设置为0，border属性为只读。 图形的height和width属性指定显示图形的窗口区高度和宽度，如果图形大于窗口区尺寸，则浏览器窗口会缩小图形以适应分配的空间，height和width属性设置为象素或浏览器窗口尺寸的百分比。 hspace和vspace属性用于指定图形与周围文本之间的边界宽度，其中hspace属性指定图形左右边界的象素数，vspace指定图形上下边界的象素数。 Image对象没有Navigator和Internet Explorer共有的方法。Navigator定义了 handleEvent（）方法，可以直接调用图形的事件处理器。 Internet Explorer定义了10个方法，支持事件处理和DHTML。
动态图形显示 网络速度快 网络速度慢 Image对象嵌入HTML中 使用JavaScript的动态图形显示功能 Newimage1=new image（） Newimage1.src=“new1.gif” document.image[o]=newimage.src 动态图形显示 在Internet连接速度比较快，或者要浏览的网页在局域网内甚至在本地的情况下，可以不用使用image( )构造器创建一系列的image对象，指定其所对应的图形文件，因为这样做的目的就是把后面要用到的图形先下载放到浏览器缓冲区内，而网络速度比较快的时候，直接对页面的<img>元素的src属性进行改变即可。如我们本课程开始时的图形切换的例子，也可以看成是图形动态切换的例子，它通过点击页面按钮来切换页面显示图形，但它在HTML中定义了<IMG>元素：<IMG NAME=“IMG1”SRC=“gif/image1.gif”>，然后使用如下的JavaScript语句 document.form1.IMG1.src = “gif/image2.gif“ 来修改IMG1的src属性，从而完成图形切换。 如果在网络连接速度比较慢的情况下，最好先使用image( )对象构造器创建image对象，把以后要显示的图形先下载到浏览器缓冲区中，以方便后面切换，尤其是在需要创建动画效果的页面中，如果图形切换的速度依赖于互联网的下载速度，那么后果可能是灾难性的。 因此可以使用JavaScript的动态显示功能，只要按照下列步骤： 1、用image( )构造器创建存放图形的一系列image对象； 2、装入与新建图形对象相关联的图形文件，即把图形的src属性设置为指定的图形 文件名； 3、将HTML文档images数组中的图形src属性设置为缓存图形的src来显示该图形。
动态图形切换的例子 定义<img>元素及image数组 <IMG WIDTH = 50 HEIGHT = 50 ></IMG> var imageArray = new Array(5) imageArray[0] = new Image(50, 50) imageArray[0].src = "gif/white.gif" … JavaScript函数 animateInterval = setInterval("animateImage( )", 5); function animateImage( ) { document.images[Math.round(24.5 * Math.random( ))].src = imageArray[Math.round(4.5 * Math.random( ))].src } 动态图形切换的例子 在这个例子中，我们首先在页面上使用<IMG WIDTH=50 HEIGHT=50></IMG>定义了25个<IMG>元素，但是并未给它们指定src，而在JavaScript中，我们先使用数组定义一组（5个）image对象，然后给每个image对象的src指定一个图形文件，在下面，通过调用JavaScript函数给页面上的25个<IMG>元素随机取一个，安排其src为5个image图象的一个，于是，就出现这样的页面效果：页面上的小图块在随机地改变颜色，页面呈现色彩斑斓的效果。另外我们在页面中还设置了一个按钮可以暂停和重新开始上述过程。 下面是其HTML源码：random.htm <HTML> <HEAD> <TITLE>图形随机切换</TITLE> </HEAD> <BODY bgcolor=pink> <FORM name="form1"> <CENTER> <IMG WIDTH = 50 HEIGHT = 50 ></IMG>
动态图形切换的例子 图1 图2 动态图形切换的例子（续） 在本例中，页面打开后，页面中的25个图形开始随机被5种颜色的小图块替换，页面出现闪烁效果。如果点击页面上的暂停按钮，这种闪烁停止，按钮变为“开始”，再点击“开始”按钮，重新开始闪烁。 图1 图2
另一个动态图形切换的例子 创建image对象 定义<img>元素 定义事件 JavaScript函数 var pinpreload = new image( ); pinpreload.src="pin.jpg"; …… 定义<img>元素 <img src="pin.jpg" id="pin" style="position:relative"> 定义事件 <input type=button name=b2 value="Change to Image2" style="position:relative" onClick="image2_selected( )"> JavaScript函数 function image2_selected( ) { pin.src = toastpreload.src; } 另一个动态图形切换的例子 这是一个Microsoft提供的关于预装载图形的例子，在本例中，当页面加载的时候，虽然在页面上首先只显示一幅图形，但是通过JavaScript我们已经定义了四个image对象，并把它们所指的图形文件取回，放在浏览器缓冲区内，当后面进行图形切换的时候，实际上不是从服务器取回图形文件显示，而是从缓冲区中提取，这样，就大大加快了图形切换的速度。 下面是这个例子的HTML源代码：imgswt[1].htm <HTML> <HEAD> <TITLE>Microsoft Image Switching Sample</TITLE> <SCRIPT language="JScript"> var pinpreload = new Image( )； pinpreload.src="pin.jpg“； var toastpreload=new Image( )； toastpreload.src="toast.jpg“； var candlepreload=new Image( )；
另一个动态图形切换的例子（续） 图1 图2 图3 图4 另一个动态图形切换的例子（续） 从上面的页面效果可以看出，当在页面上点击按钮1时，出现图1所示的效果；当点击按钮2，3，4时，则出现图2，图3，图4所示效果，看看按钮3的onclick( )事件， pin.src = candlepreload.src；页面image对象的src转换为缓冲区中image对象candlepreload的src，于是从缓冲区中取出图象文件3在页面显示出来，其它按钮的操作类似按钮3。 图3 图4
图象映射及应用 <MAP>、 <AREA>标志 图象映射的应用 <MAP NAME = "IMAP1"> <AREA NAME = "link1" COORDS = "54,105,118,125" HREF = "JavaScript: ShowMessage( )"> <AREA NAME = "link2" COORDS = "104,53,171,75" HREF = "http://nts.online.edu.cn"> </MAP> <IMG SRC = "wisdom.jpg" WIDTH = 240 HEIGHT = 155 USEMAP = "#IMAP1"> 图象映射及应用 可单击的图形映射使web页面间的移动具备图形化、直观和易用的特点。图形映射就是分成不同区域的图形，每个区域与某个URL相关联。用户单击图形映射的某个区时，装入与该区相关联的URL。JavaScript支持图形映射。 HTML中的<MAP>和<AREA> 标志可以用于实现有效的图形映射。但象通常一样， JavaScript提供了一些补充功能。这些功能进一步改进了HTML的功能。在图象映象中，可以把超级链接加到<AREA>中，也可嵌入JavaScript语句或函数。如果使用<IMG>标识确定一个图象并指定超级链接的话，那么这幅图象就只能指向一个链接站点，如果用图象映象并在其中创建多个<AREA>，这样，在一幅图象的不同区域，就可以有多个超级链接了。 我们来看一个图象映射的例子。首先在页面中定义一个<map>元素及两个<area>元素，分别指向JavaScript函数及URL。这样，当鼠标移到图象的指定区域，便会指向所指定的超级链接，点击鼠标后，即可进入。本例中，ShowMessage( )函数为一个确认对话框。 下面是这个例子的源代码：imap2.htm <HTML> <HEAD>
图象映射及应用 图象映射及应用（续） 在这个例子中，创建了一个图象映象，同时指定了图象映象对应的图片。因为在图象映象中指定<AREA>区域之后，区域和周围地方并没有明显区别，因此我们在图片的相应区域加了标记，注意这个标记并不是因为指定了<AREA>才出现的。在例中，当鼠标移到图形的万博内部网的位置时，鼠标变为小手状，窗口下面的状态栏显示万博内部网的网址，点击便进入万博内部网。当鼠标位于“万博主页”位置时，点击后可出现图2的效果，弹出一个确认框，如果选择“确定”，则确认框消失，页面切换到万博主页，如果选择取消，则确认框消失，但页面保持图1的样子不变。 图1 图2
Internet Explorer中的结构化图形控件 通过<OBJECT>标识创建结构化图形控件 <OBJECT STYLE="HEIGHT:300; WIDTH:300" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"> <PARAM NAME="Linennnn" VALUE=“method)"> Internet Explorer中的结构化图形控件 结构化图形控件是Microsoft的ActiveX控件，其在Internet Explorer4.0中出现（而且在安装浏览器时自动安装的）。像对待所有的ActiveX控件一样，可以通过<object>标识来创建该控件。该控件即有属性也有方法。为了使用属性，需在<object> 元素中放入一个<param》标识，具体过程见上面的代 码。创建时，必须指定结构化图形的classid值： 369303C2-D7AC-11D0-89D5-00A0C90833E6 是确定且唯一的，操作系统利用它来在windows注册表中跟踪该控件。 定义中的height指结构化图形画图区域的高度，width指该结构化图形画图区域的宽度，参数名 name=“Linennnn”，其中的nnnn指某个方法的序列号，必须以0001开始，而且应该按顺序并且连续。之后的method是结构化图形控件的诸多方法中的一个，用来指定图形的形状，边缘的颜色，前景色和后景色等。
结构化图形控件的方法 方 法 含 义 Arc 创建一个简单的圆弧或椭圆弧 FillSpline 创建一个封闭的折线图形 Oval 方 法 含 义 Arc 创建一个简单的圆弧或椭圆弧 FillSpline 创建一个封闭的折线图形 Oval 创建一个椭圆（或圆形） Pie 创建一个在关联矩形中心封闭的椭圆弧 Polygon 创建一个封闭多边形 PolyLine 创建一个分段线 PolySpline 创建一个开放的折线图形 Rect 创建一个矩形 RoundRect 创建一个圆角矩形 SetFillColor 设置图形填充的前景和背景色 结构化图形控件的方法 该控件有上述的一些方法。这些方法用于在创建该控件时需在“value”中指定的。
结构化图形控件的方法 方 法 含 义 SetFillStyle 设置填充类型 SetFont 设置控件字体 SetGradientFill 方 法 含 义 SetFillStyle 设置填充类型 SetFont 设置控件字体 SetGradientFill 指定梯度填充的始末点 SetHatchFill 指定填充是否透明 SetLineColor 设置绘制图形的线条颜色 SetLineStyle 改变当前图形的线条风格 SetGradientShape 设置梯度图形为多边形轮廓 SetTextureFill 设置结构化图形的字体源 Text 以当前字体和颜色创建一个字符串 结构化图形控件的方法（续）
结构化图形控件的应用 创建一个结构化图形控件，在其中包含一些方法，如： <Param Name=“Line0001” Value=“SetLineColor(255,0,0)”> <Param Name="Line0002" Value="SetLinestyle(1)"> <Param Name="Line0003" Value="SetFillColor(150, 150, 120)"> <Param Name="Line0004" Value="SetFillStyle(1)"> <Param Name="Line0005" Value="Rect(-80, -80, 180, 180, 45)"> <Param Name="Line0006" Value="SetFillColor(0, 0, 255)"> <Param Name="Line0007" Value="Oval(-80, -80, 180, 180, 0)"> <Param Name="Line0008" Value="SetFillColor(0, 200, 200)"> <Param Name="Line0009" Value="Pie(-80, -80, 180, 180, 0, 43, 0)"> <Param Name="Line0010" Value="SetFillColor(255, 100, 50)"> <Param Name="Line0011" Value="Pie(-80, -80, 180, 180, 0, 43, 90)"> 结构化图形控件的应用 通过创建一个实际的结构化图形控件，我们来看一些方法的使用，如首先设置要绘图的线条颜色，由于它是首先设置的方法，所以其name为Line0001，使用value=“ ”的格式来使用结构化图形的方法SetLineColor(255,0,0)来设置绘图的线条颜色，下面一个方法，其name为Line0002，方法为SetLinestyle(1)，设置线条的类型为1，就是细实线 。下面是第三个方法，其name为Line0003，方法为SetFillColor(150,150,120)，设置了整个图形控件的填充色，下面接着的SetFillStyle(1)设置了其填充类型。之后的Line0005，定义了一个矩形的原点，宽，高，以及旋转的角度。其原点在结构化图形的(-80,-80)，宽，高各为180，旋转角度为45度。再下面定义了一个宽，高相等的椭圆，实际就是一个圆，并在它前面设置了其填充色。再下面使用不同填充色定义了张角为43度，旋转角度分别为0，90，180，270度的四个封闭扇形区域，因此屏幕出现了不同的色彩变换。
结构化图形控件的应用 结构化图形控件的应用（续） 上图是结构化图形控件例子的页面显示效果，由于矩形旋转了90度，里面加了一个底色为兰色的圆，圆上面加上四瓣不同颜色的扇形区域，构成了上面的图形。虽然结构化图形的设计暂时没有涉及到JavaScript和动画，但是我们在后面的学习中会看到，这样的结构化图形在页面中也是有可能动起来的。下面是这个例子的源码，struct.htm <HTML> <HEAD> <TITLE>Structured Graphics Control Example</TITLE> </HEAD> <BODY> <CENTER> <H2>结构化图形控件</H2> <OBJECT STYLE="HEIGHT:300; WIDTH:300" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
Sequencer控件 是DirectAnimation控件的内嵌定时器 创建Sequencer控件 <OBJECT ID="sequencerControl" CLASSID= "CLSID:B0A6BAE2-AAF0-11d0-A152-00A0C908DB96“ STYLE= "WIDTH:1; HEIGHT:1"> </OBJECT> Sequencer控件 Internet Explorer 4.0有一个很大的例程和方法库，支持动画和多媒体，统称为Direct Animation，有时简称为DA。前面刚学过的结构化图形控件就是属于DA控件的一种，而且我们本节学习的Sequencer控件也是属于DA控件的一种，是DirectAnimation控件的内嵌定时器。使用它可以控制DA控件中的其它控件。比如用来控制结构化图形控件，从而实现动画效果。 同结构化图形控件一样，需通过<object>标识来创建该控件，并指定ID值。
Sequencer控件的方法 方 法 实 现 At 指定动作集中的一个新的动作 Pause 在当前位置停止动作集 Play 方 法 实 现 At 指定动作集中的一个新的动作 Pause 在当前位置停止动作集 Play 如果动作已停止，启动它们 Seek 将当前的重放位置设置为一个新的指定时间 Stop 停止动作集重放，将重放位置设置到起点 Sequencer控件的方法 Sequencer控件没有属性，其方法如上所示。
Sequencer控件的事件 Sequencer控件的事件 事 件 意 义 OnInit 在序列发生器第一次被完全载入内存时发生 事 件 意 义 OnInit 在序列发生器第一次被完全载入内存时发生 OnPause 在动作集重放被暂停时发生 OnPlay 在动作集启动重放时发生 OnSeek 在Seek方法调用完成时发生 OnStop 在动作集重放结束或被停止时发生 Sequencer控件的事件 Sequencer控件的事件类型如上所示
使用 Sequencer控件创建动画 控制一个动作的操作 启动Sequencer控件：play( )方法 Object.sequencerCountrol(“actionsetname”).At(time, “script”,[loop,interval, tiebreak, drop threshold) 启动Sequencer控件：play( )方法 sequencerCountrol（ “actionsetname”).play（） 停止Sequencer控件：stop（）方法 实现动画效果 object.rotate(x, y, z) 使用 Sequencer控件创建动画 定义Sequencer控件后，可以通过其at( )方法实现控制一个动作的操作，格式如上， sequencerCountrol为我们前面定义的该控件的ID值。Object可以指对象，如document对象。 在Sequencer控件的at( )方法中，actionsetname代表sequencer控件要启动的动作的名称，time为动作的启动时间，script为要调用的函数的名称，loop为该动作的循环次数，缺省值为1，若设为-1，则无限次循环。interval为动作间隔，tiebreak为动作的优先级，缺省值为-1，一般在0-n之间取值，值越小优先级越高。drop threshold为可选参数，设置一个时间值，表示一个动作必须在这个时间值内被执行。 使用at( )方法设置sequencer控件后，使用其play( )方法就可以启动这个控件了，同样使用其stop( )方法则可以停止这个控件的执行。 Sequencer控件被启动后，需要执行的动作是旋转图形，可以通过调用结构化图形控件的rotate( )方法。在rotate(x, y, z)方法中，x为其沿X轴旋转的角度，y为其沿Y轴旋转的角度，z为其沿Z轴旋转的角度。
使用Sequencer控件创建动画的例子 图1 图2 使用Sequencer控件创建动画的例子 上图中所示为此例的显示效果。 在本例中，我们首先创建了一个结构化图形控件，然后创建了一个Sequencer控件，利用Sequencer控件来控制结构化图形控件，调用结构化图形控件的rotate( )方法来旋转图形，达到动态效果。图1是初始界面，当点击开始旋转按钮后，页面中的图形开始旋转，图2、图3和图4分别是旋转过程中的图形转动的不同位置。下面是这个例子的源代码rotate2.htm <HTML> <HEAD> <TITLE>A Sequencer Control Example</TITLE> </HEAD> <BODY > <FORM NAME = form1> <CENTER> <H2>使用Sequencer控件创建动画的例子</H2> </CENTER> <OBJECT ID=Image 图3 图4
使用DAViewerControl控件 创建控件 控件的属性 <OBJECT ID="DAControl" STYLE="" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"> </OBJECT> 控件的属性 PixelLibrary Meterlibrary 使用DAViewerControl控件 DAViewerControl控件是DA控件中的一种，此控件的定义也是在<OBJECT>标记中，格式如上所示。ID为控件的ID值，方便用户在脚本中引用本控件，在STYLE中，可以指定控件在页面中的位置，控件的大小等属性。其CLASSID值为固定的，必须是上面的数值。在控件定义完成后，对控件的操作就可以在JavaScript中进行了。 DAViewerControl控件的方法和属性比较多，通过在JavaScript中使用它的方法和调用它的属性，我们可以设计出动态变化的图形和文字。 DAViewerControl控件的属性有一个叫做PixelLibrary，它实际上是一个较大的例程扩展库，其内部就包含很多例程，而一些例程又包含能够完成从创建各种形状的图形到图形着色，变色，平移，沿某种曲线移动，旋转等。 另一个重要的属性是Meterlibrary，它是与PixelLibrary又同样功能的例程扩展库，区别是在PixelLibrary中，所有的度量使用象素，而在Meterlibrary例程库中，所有的度量单位使用米。
DAViewerControl控件的使用 代码中的关键语句 m = DAControl.PixelLibrary clr = m.ModifiableBehavior(m.Cyan); clr.SwitchTo(m.Blue); fillImg = m.SolidColorImage(clr); ovalImg = m.Oval(200,200).Fill(m.DefaultLineStyle,fillImg); rotXf = m.Rotate3RateDegrees(m.Vector3(1,1,1), 45). ParallelTransform2( ); finalImg = ovalImg.Transform(rotXf); DAControl.Image = finalImg; DAViewerControl控件的使用 完全将DirectAnimation讨论清楚可能需要好几本书的内容，并且范围也不仅仅限于浏览器和JavaScript，在Visual Basic和Visual C++中，都有篇幅介绍DirectAnimation，另外在Microsoft的站点上，也有介绍DirectAnimation的内容和部分使用JavaScript控制这些例程的例子。我们主要通过一个例子来学习DAViewerControl的使用。 在本例中，上面的关键语句在源代码中并不是连续的。当定义了一个DAViewer Control控件之后，m=DAControl.PixelLibrary就是调用例程PixelLibrary，在此后的“m.”格式的语句，实际上就是这个例程的方法。下面的clr=m.ModifiableBehavior(m.Cyan)调用ModifiableBehavior方法，取出m的颜色属性赋给clr，这样下面的clr .SwitchTo(m.Blue)就比较好理解了，SwitchTo方法将颜色转为兰色(blue)，下面的两个语句先设定了填充色，然后使用这个填充色填充了一个长轴、短轴都为200的椭圆。再下面的一个语句确定了旋转，也就是以矢量(1,1,1)为轴，每秒钟旋转45度，再把这个旋转赋给前面定义的椭圆。最后把这个可以旋转的，填充了颜色的椭圆，设定为这个DAViewerControl控件的图象源，以便它显示。
DAViewerControl控件的使用（续） 在本例中，当页面打开时，显示出一个做三维旋转的雪青色圆，页面上有三个按钮，点击“Red”按钮，则图案颜色变为红色，而旋转不受影响，仍然保持连续旋转。点击“Green”按钮和“Blue”按钮，则图案颜色分别变为绿色和蓝色，同样旋转不受影响。 下面是这个示例的源代码：clrswtch[1].htm <HTML> <HEAD><TITLE>DirectAnimation SDK, JScript sample</TITLE> </HEAD> <BODY BGCOLOR=WHITE TOPMARGIN=15 LEFTMARGIN=20> <FONT FACE="Verdana, Arial, Helvetica" SIZE=2> <CENTER> <H2>DA animation</H2> <input type=button value="Red" name="RedButton"> <input type=button value="Green" name="GreenButton"> <input type=button value="Blue" name="BlueButton">
使用path控件 定义path控件 其它的param参数，如 <OBJECT ID="PathCtl" CLASSID="CLSID:D7A7D7C3-D47F-11d0-89D3-00A0C90833E6" STYLE="WIDTH:100%; HEIGHT:100%"> <PARAM NAME="AutoStart" VALUE="0"> <PARAM NAME="Bounce" VALUE="0"> … </OBJECT> 其它的param参数，如 repeat shape 使用path控件 Path控件同样是DirectAnimation控件之一。通过它可以设定某个元素在页面中移动所要经过的线路，并让元素沿设定的线路移动。 同前面一些控件一样，使用<object>标记来创建该控件。path控件的classid值是确定且不能改变的，在定义其style之后，通过一些参数就可以确定控件的特点，如<PARAM NAME=“AutoStart” VALUE=“0”>表示“AutoStart”即“自动开始”属性被设为false，如为1则“AutoStart”属性为true，同理“Bounce”属性被设为false，表示移动是连续的，而不是到边界后被“弹回”，path控件还有一些其它的参数，分别代表不同的含义，如“repeat”，表示重复次数，如果为-1，则重复无限次；参数“shape”，表明要移动的路线的形状，可以是椭圆oval( )，矩形rect( )或折线polyline( )，椭圆和矩形只要确定起始位置坐标和宽、高就可以了，而折线则需要先指定所经过点的个数，然后是这些点的坐标，如polyline(3,100,150,120,170,130,170)表示折线由三个点组成，起点是(100,150)，中间点是(120,170)，终点是(130,170)。
使用path控件控制结构化图形控件 定义结构化图形控件 <OBJECT ID="pthTarget“……. > <PARAM NAME="Line0001" VALUE="SetFillColor(0,0,255)"> <Param Name="Line0002" VALUE="SetFillStyle(1)"> <Param Name=“Line0003” VALUE=“SetFont(‘楷体’, 30,650,1,0,1)"> <Param Name=“Line0004” Value=“Text(‘沿椭圆旋转’,-100 , 0,-20)"> </OBJECT> 使用path控件控制结构化图形控件 下面是使用path控件控制结构化图形的一个例子，在上面的代码中我们定义了一个结构化图形控件，不过这次不是画一个图形，而是设定了一个字符串做它的内容，首先在定义结构化图形控件时确定了宽度和高度均为200，下面设定填充色为蓝色，填充类型为1（也就是以这种颜色全部填充控件内容，再下面设定了字体为“楷体”，大小为30，阴影效果为650，后面的1,0,1分别代表“有斜体”，“无下划线”，“有中划线”，再下面设置这个控件的核心，是一段字符‘沿椭圆旋转’，字符的起始位置为(-100,0)（相对控件的中心而言），后面的-20是字符倾斜的角度。
使用path控件的例子 使用path控件的例子 上面是使用path控件的例子，在这个例子中，定义了两个DA控件，一个是path控件，另一个是结构化图形控件(Structured Graphics Control，并使用path控件来控制Structured Graphics控件，path控件设置了其移动的轨迹为一个椭圆，在结构化图形控件中，如上页所述，定义了一段文字，楷体，30号字，斜体，无下划线，有中划线，并整体向上倾斜20度。点击开始按钮后，按钮的style.visibility设置为“hidden”，按钮消失，而path控件被触发，于是字符就沿着椭圆旋转下去。 下面是这个例子的源代码：oval.htm <HTML> <HEAD> </HEAD> <BODY bgcolor=pink> <FORM NAME = form1> <INPUT TYPE=BUTTON Value="开始旋转" name="button" onClick="startAnimation( )"> </FORM> <OBJECT ID="PathCtl" CLASSID="CLSID:D7A7D7C3-D47F-11d0-89D3-00A0C90833E6“