<html>
<head>
<title>js实现图画本功能</title>
<style>
.d{width:3px;height:3px;font-size:1px;border:0;z-index:1;position:absolute;display:inline;visibility:visible;}
</style>
<script>
var C='red';
function $(o){return document.getElementById(o);}
function d(x,y,o){
o=document.createElement("DIV");
o.className='d';
o.style.left=x;
o.style.top=y;
o.style.background=C;
$('dWindow').appendChild(o);
}function fDel(){$('dWindow').innerHTML='';}
function fDblClk(e){}
function fClk(e){}
function fDown(e,x,y){x=e.clientX;y=e.clientY;if(x==l&&y==t)return;l=x;t=y;d(x,y);}
function fUp(e){fDown(e);}
function fMove(e,x,y)
{
if(e.button!=1||l<0||t<0) return;
x=e.clientX;y=e.clientY;
d(x,y);
/*
j=x-l;k=t-y;
if(j>k)
m=j/k;if(x<l){
if(y<t){n=0;}
else if(y==t){n=0;for(i=l-1;i>x;i--)d(i,t);}
else if(y>t){n=0;}
}
else if(x==l){
if(y<t){n=0;for(i=t-1;i>y;i--)d(l,i);}
else if(y==t){n++;for(i=l-n;i<=l+n;i++)d(i,t-n);for(i=l-n;i<=l+n;i++)d(i,t+n);for(i=t-n+1;i<=t+n-1;i++)d(l-n,i);for(i=t-n+1;i<=t+n-1;i++)d(l+n,i);}
else if(y>t){n=0;for(i=t+1;i<y;i++)d(l,i);}
}
else if(x>l){
if(y<t){n=0;j=x-l;k=t-y;m=j/k;)}
else if(y==t){n=0;for(i=l+1;i<x;i++)d(i,t);}
else if(y>t){n=0;}
}
*/
}var n,l=-1,t=-1;
function fOver(e){}
function fOut(e){}
</script>
</head>
<body style="margin:0px;"><table style="width:100%;height:100%;">
<tr><td height=12><div style="border-bottom:1px solid #aaa;background:#eee;">
<input type=button value=清空 onclick=fDel()><input type=button value=查看 onclick=alert(document.body.innerHTML);>
</div></td></tr>
<tr><td><div style="border:0px solid #000;height:100%;background:#fff;">
<div id=dWindow style="height:100%;" onclick=fClk(event) onmouseDown=fDown(event) onmouseMove=fMove(event)></div>
</div></td></tr>
</table></body>
</html>以上是源码 鼠标移动稍快 就会变为虚线... 不知道怎么回事
有没高手帮忙解决下....!
鼠标移动触发onmousemove, 但是当快速移动鼠标的时候
在极短的时间内触发的onmousemove次数有限。
我觉得一个解决办法是判断两次鼠标的位置的距离，
如果太短， 就插值修正。
可以看看不久前我写的简单的js绘图：
http://blog.csdn.net/sunxing007/archive/2009/04/23/4103787.aspx
其中画圆的时候，本来是把圆周360等分画360个点，后来发现
随着圆周增大， 画出来的圆就断开了， 于是作了以下修正， 你可以参考一下。