JavaScript画线的库http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
解决方案 »
- 163邮箱添加附件功能可以用鼠标拖动硬盘文件到指定位置即上传附件怎么实现啊?
- 如何用div挡住后面的文本框
- 请问。。这是javascript什么结构类型啊?
- 怎样让一个路径下文件夹中的所有文件,按照创建时间排续?
- html object 资源加载完成的事件怎么在chrome中响应
- [extjs]请教一个在store.load的回调函数中修改配置的问题
- javascript很短的一个代码,却出问题,大家看看
- 可否跟踪JavaScript执行过程的工具
- 同一个name的cookie能不能以数组保存?
- 好书下载!
- 怎样用javascript判断输入的用户名只能是英文和数字的结合?
- 我想在IE中做出类似windows资源管理器一模一样的效果,不知哪里有例子可以参考?
<head>
<title>动态创建VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript">
var clickX1 = -1;
var clickY1 = -1;
var clickX2 = -1;
var clickY2 = -1;
var theLastLine=null;
document.onclick=function (){
if(clickX1<0){
clickX1=event.x;
clickY1=event.y;
}
else{
createLine(clickX1,clickY1,event.x,event.y);
theLastLine=null;
clickX1=event.x;
clickY1=event.y;
}
}
document.ondblclick=function(){
document.body.click();
clickX1=-1;
clickY1=-1;
theLastLine=null;
return;
}
function createLine(x1,y1,x2,y2)
{
var strElement='<v:line from="'+x1+','+y1+'" to="'+x2+','+y2+'"></v:line>';
//alert(strElement);
var newline = document.createElement(strElement);
group1.insertBefore(newline);
theLastLine=newline;
}
document.onmousemove = function ()
{
if(clickX1 != -1){
if(theLastLine==null)
createLine(clickX1,clickY1,event.x,event.y);
else
theLastLine.to=event.x+","+event.y;
}
}
function load(){
var strElement='<v:line id="autoLine" from="100,100" to="100,100"></v:line>';
//alert(strElement);
var newline = document.createElement(strElement);
group1.insertBefore(newline);
autoShowX();
}
function autoShowX(){
var line=document.getElementById("autoLine");
if(line.to.x<=200){
line.to.x++;
setTimeout("autoShowX()",10);
}
else if(line.to.y<=200){
line.to.y++;
setTimeout("autoShowX()",10);
}
}
</script>
<body onLoad="load()" style="cursor:crosshair" oncontextmenu="event.returnValue=false;">
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;" coordsize = "200,200"></v:group>
</body>
</html>
我就是用上边的你给的划线方法做的,画各种图形都没有问题,但是我要画一个动态的直线轨迹,相当于一个直线的动画,就有问题,后来我又把那些方法单独提取出来,用最基本的方法的作了一下,还是不行(动态时不行),帮我分析一下,代码如下:
<html>
<SCRIPT LANGUAGE=javascript>
var i=1;
function aa()
{
mkDiv(i,i);
i++;
}
function mkDiv(x, y)
{
var str= '<div style="position:absolute;'+
'left:' + x + 'px;'+
'top:' + y + 'px;'+
'width:1px;'+
'height:1px;'+
'clip:rect(0,1px,1px,0);'+
'background-color:#000000' +
';"><\/div>';
document.write(str);
} var cc = setInterval("aa()",1000);
</SCRIPT>
<body>
</body>
</html>为何不行呢???
为何有旋转的效果呢,不能直接画任意角度的动态线么?我不想要旋转
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="/style/default.css" />
<style type="text/css">
<!--
v\:* {behavior:url(#default#vml);}
-->
</style>
<script language="VBScript">
Function VBTypeName (var)
VBTypeName=TypeName(var)
End Function
</script>
<script language="JavaScript">
<!--
//路径数组,测试用
var points_temp=new Array();
//点坐标类
function IPoint(){
this.x=0;this.y=0;
}
var i_x=0;i_y=0;
for(var iCnt=0;iCnt<100;iCnt++){
var d_x=parseInt(Math.random()*20)+5;
var d_y=parseInt(Math.random()*20)+5;
if(parseInt(Math.random()*10) & 0x01)
d_x=d_x*-1;
if(parseInt(Math.random()*10) & 0x01)
d_y=d_y*-1;
i_x+=d_x;
i_y+=d_y;
var p=new IPoint();
p.x=i_x;
p.y=i_y;
points_temp[points_temp.length]=p;
}
//动态画线函数
flag=0;
var interval=null;
function drawline(){
var s='<v:line from="'+points_temp[flag].x.toString()+','+points_temp[flag].y.toString()+'" to="'+points_temp[flag+1].x.toString()+','+points_temp[flag+1].y.toString()+'" style="position:absolute;left:100px;top:100px;" strokecolor="red" strokeweight="2">';
var p=document.createElement(s);
document.body.appendChild(p);
flag++;
if(flag>98){
window.clearInterval(interval);
}
}
-->
</script>
<title></title>
</head>
<body>
<script language="JavaScript">
<!--
drawline();
interval=window.setInterval('drawline',100);
//debugger;
-->
</script>
</body>
</html>
<script language="JavaScript">
var i=1;
function aa()
{
mkDiv(i,100);
i++;
}
function mkDiv(x, y)
{
abc.style.width=i//abc.style.left=x X坐标
//abc.style.top=y Y坐标
//abc.style.height=height 高
//abc.style.width=width 宽
}
setInterval("aa()",100);
</SCRIPT>具体的你再完善吧。