您的位置：首页 > Web前端 > HTML

用 VML 实现仿雷达扫描效果

2010-05-12 15:48 267 查看

解决思路：

用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 是 Vector Markup Language 的缩写，关于 VML 的更多资料，请访问： http://blog.csdn.net/hemingwang0902/archive/2009/06/27/4303369.aspx

本例代码运行效果如图2.3.11所示，图中的绿色光点从左上角向右下慢慢移动，而光束则以固定速度作顺时针的圆周运动。

图2.3.11 仿雷达扫描效果

特别说明:

本例主要是Light滤镜的几个方法的应用，其中用到VML来输出10个同心圆，同心圆的效果也可以用图片来代替。

博文来源：http://www2.flash8.net/teach/4007.htm

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： behavior function url html div 360

相关文章推荐

新的分享

章节导航