用VML语言在html中画图和实现动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lishirong/article/details/41674593
效果图如下:
用VML语言在html中画图和实现动画 - lishirong - 技术成就梦想努力成就未来
 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    
    <title>风向测试</title>
<style>
v\:*{
behavior:url(#default#VML);
}
</style>
<script language="javascript">
var i=0;
var t=0;
function test(){
loadRotation();
window.setInterval(change,1000);
window.setInterval(changeRotation,50);
}
function loadRotation(){
rotation();
rotation1();
rotation2();
rotation3();
}
function change(){
document.getElementById("test").innerHTML=t;
t++;
}
function changeRotation(){
document.getElementById("group1").Rotation=i;
i=i+5;
}
function rotation(){
var oVGroup = document.createElement("<v:group id='group0' style='position:absolute;LEFT:100px;TOP:200px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");
show2.appendChild(oVGroup);
var lineStr="<v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,3000' to='3000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,0' to='6000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,800' to='6000,800'></v:line>";
document.all("group0").innerHTML=lineStr;
//document.all("group1").Rotation=180;
}
function rotation1(){
var oVGroup = document.createElement("<v:group id='group1' style='position:absolute;LEFT:100px;TOP:200px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");
show2.appendChild(oVGroup);
var lineStr="<v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,3000' to='3000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,0' to='6000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,800' to='6000,800'></v:line>";
document.all("group1").innerHTML=lineStr;
//document.all("group2").Rotation=180;
}
function rotation2(){
var oVGroup = document.createElement("<v:group id='group2' style='position:absolute;LEFT:100px;TOP:300px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");
show2.appendChild(oVGroup);
var lineStr="<v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,3000' to='3000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,0' to='6000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#FF0000' from='3000,800' to='6000,800'></v:line>";
document.all("group2").innerHTML=lineStr;
//document.all("group1").Rotation=180;
}
function rotation3(){
var oVGroup = document.createElement("<v:group id='group3' style='position:absolute;LEFT:100px;TOP:300px;WIDTH:5px;HEIGHT:8px;' coordsize='1600,1600'/>");
show2.appendChild(oVGroup);
var lineStr="<v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,3000' to='3000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,0' to='6000,0'></v:line><v:line style='position:absolute' strokeweight='1' strokecolor='#00FF00' from='3000,800' to='6000,800'></v:line>";
document.all("group3").innerHTML=lineStr;
//document.all("group2").Rotation=180;
}
function correctLocation(){
restore();
var fx=document.getElementById("fx").value;
var x=document.getElementById("x").value;
var y=document.getElementById("y").value;
//alert("fx:"+fx+"x:"+x+"y:"+y);
var left=document.getElementById("group3").style.left;
var top=document.getElementById("group3").style.top;
left=left.substring(0,left.length-2);
top=top.substring(0,top.length-2);
//alert("left:"+left+"top:"+top);
document.getElementById("group3").Rotation=fx;
var newLeft=parseInt(left)+parseInt(x);
var newTop=parseInt(top)+parseInt(y);
//alert("newLeft:"+newLeft+"newTop:"+newTop);
document.getElementById("group3").style.left=newLeft+'px';
document.getElementById("group3").style.top=newTop+'px';
}
function restore(){
document.getElementById("group3").style.left='100px';
document.getElementById("group3").style.top='300px';
}
</script>
  </head>
  
  <body onload="test();">
    <h4 style="clear:both;margin-left:100px;margin-top:140px;">风向测试 </h4>
    <div style="clear:both;margin-left:100px;margin-top:0px;" id="test"></div>
    <div id="picPara" style="clear:both;">
<label id="show2" style="position:absolute;width:0px;height:0px;display:inline;z-index:4;left:0;top:30;" >
</label>
</div>
<div style="margin-left:100px;margin-top:220px;">
请输入风向值:<input id="fx" type="text"/>(0-360之间的整数)<br/>
x修正值:<input id="x" type="text" value="0"/>(整数,可以为负)<br/>
y修正值:<input id="y" type="text" value="0"/>(整数,可以为负)<br/>
<input type="button" value="修正位置" onclick="correctLocation();">
</div>
  </body>
</html>
阅读更多

没有更多推荐了,返回首页