本文介绍了一种使用VML(Vector Markup Language)和Light滤镜技术实现的仿雷达扫描效果。通过不断更新锥形光和点光源的位置，实现了光束旋转及光点移动的效果。
解决思路：
用VML渲染出几个同心圆，然后利用Light滤镜的方法在上面添加环境光(作背景颜色)、锥形光(作扫描光速)和点光(作动物物体)，之后定期移动锥形光的焦点和点光的原点。
代码示例：
<html xmlns:x = "urn:schemas-microsoft-com:vml"> <head> <title>VML & Light实现的仿雷达扫描效果</title> <mce:script type="text/javascript"><!-- var cX,cY var pX = 10 var pY = 20 var radius = 100 var degree = 230 var rate =Math.PI/180 function scan(){ //计算锥形光新焦点的 X 坐标 cX = radius*(1+Math.cos(degree*rate)) //计算锥形光新焦点的 Y 坐标 cY = radius*(1+Math.sin(degree*rate)) //如果 degree 能被 30 整除(相当于大概每 300 毫秒执行一次下面的语句) if(!degree%30){ if(pX+=5,pX>=200) pX=0 //在点光的原点将超出边界时的处理 if(pY+=5,pY>=200) pY=0 } degree+=10 //锥形光的旋转角度 if(degree==360)degree=0 //锥形光旋转一周后的处理 with(radar.filters.light){ movelight(1,cX,cY,0,1)//移动锥形光 movelight(2,pX,pY,2,1)//移动点光 } } function window.onload(){//在页面加载完毕后执行 //给 id 为 radar 的对象添加 Light 滤镜 radar.style.filter="light()" with(radar.filters.light){ addambient(0,225,0,20)//添加环境光 addcone(100,100,5,0,0,0,225,0,60,15)//添加锥形光 addpoint(pX,pY,5,0,225,0,100)//添加点光 } setInterval("scan()",100)//每 100 毫秒执行一次 scan() 函数 } // --></mce:script> <mce:style><!-- x/:*{behavior:url(#default#vml);position:absolute} --></mce:style><style mce_bogus="1"> x/:*{behavior:url(#default#vml);position:absolute} </style> </head> <body> <div id="radar" style="position:absolute;width:200px;height:200px;"> <mce:script type="text/javascript"><!-- for(var i=0;i<100;i+=10) //输出 10 个同心圆 document.write("<x:oval style="/" mce_style="/""left:iP;top:iP;width:iC;height:iC/" //>".replace(/iP/g,i).replace(/iC/g,200-2*i)) // --></mce:script> </div> </body> </html>
提示：
本例中用到了VML来输出同心圆，如果嫌麻烦，你也可以直接用图片来代替。VML是VectorMarkupLanguage的缩写，关于VML的更多资料，请访问：http://blog.youkuaiyun.com/hemingwang0902/archive/2009/06/27/4303369.aspx
本例代码运行效果如图2.3.11所示，图中的绿色光点从左上角向右下慢慢移动，而光束则以固定速度作顺时针的圆周运动。
图2.3.11仿雷达扫描效果
特别说明:
本例主要是Light滤镜的几个方法的应用，其中用到VML来输出10个同心圆，同心圆的效果也可以用图片来代替。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
