在网页中点击两点就可以自动画出一条直线了，很少使用到的一种网页特效，根据自己网站的需求来修改即可。
<html>
<head>
<style type="text/css">
body{
margin:0px;
color:#ffffff;
background:#000000;
font-size:12px;
}
div{
float:inline;
margin:0px;
}
#box{
position:absolute;
left:50%;
top:50%;
margin-left:-390px;
margin-top:-270px;
width:740px;
height:540px;
border:1px solid #eeeeee;
background:#cccccc;
}
#container{
position:absolute;
left:50%;
top:50%;
margin-left:-320px;
margin-top:-240px;
width:640px;
height:480px;
border:1px solid #666666;
background:#ffffff;
overflow:hidden;
cursor:crosshair;
}
#contain{
position:absolute;
left:0;
top:0;
width:640px;
height:480px;
overflow:hidden;
z-index:1;
}
#cy{
color:#000000;
text-align:right;
padding-top:14px;
position:absolute;
left:0px;
top:10px;
width:50px;
border-right:1px solid #666666;
height:30px;
}
#cx{
color:#000000;
text-align:right;
padding-right:18px;
padding-top:2px;
position:absolute;
bottom:0px;
right:10px;
height:30px;
border-top:1px solid #666666;
width:50px;
}
#o{
color:#000000;
text-align:right;
padding-right:2px;
padding-top:6px;
position:absolute;
bottom:10px;
left:0px;
height:30px;
width:50px;
}
</style>
</head>
<body scroll="no" onload="initTab();">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="box"><div id="cy">(0,480)</div><div id="cx">(640,0)</div><div id="o">(0,0)</div><div id="container" onclick="draw()" oncontextmenu="window.location=window.location;return false;" onmousemove="return false"><div id="contain"></div></div></div>
<script language="javascript">
/*
作者：hsb008 QQ:416143054
使用方法：
1.鼠标在白色区域内取点 ，取到两点就画线
2.右击清除。
*/
var z=1;
var flag=0,xx1,xx2,yy1,yy2;
function initTab(){
var contain=document.getElementById("contain");
var str,i,j;
str="<table width='640' height='480' border='1' cellpadding='0' cellspacing='0' style='border-collapse:collapse;border-color:#eeeeee;background:white;position:absolute;top:-1px;left:0px;'>"
for(i=0;i<12;i++){
str+="<tr>"
for(j=0;j<16;j++){
str+="<td> </td>"
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
str+="</tr>"
}
str+="</table>"
contain.innerHTML=str;
}
function setpixel(x,y,color,size){
var div=document.createElement("div");
var container=document.getElementById("container");
size=size==""?"5px":""+size+"px";
div.style.zIndex=z++;
div.style.overflow="hidden";
div.style.position="absolute";
div.style.left=x;
div.style.bottom=y;
div.style.width=size;
div.style.height=size;
div.style.backgroundColor=color;
container.appendChild(div);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function DDALine(x1,y1,x2,y2){
var dx,dy,x,y,t,i;
dx=x2-x1;
dy=y2-y1;
t=Math.abs(dx)>Math.abs(dy)?Math.abs(dx):Math.abs(dy);
dx/=t;
dy/=t;
x=x1;
y=y1;
for(i=0;i<t;i++){
setpixel(Math.round(x),Math.round(y),"#000000",1);
x+=dx;
y+=dy;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
}
function draw(){
var box=document.getElementById("box");
var container=document.getElementById("container");
var x=event.x-box.offsetLeft-container.offsetLeft-4;
var y=document.body.clientHeight-event.y-box.offsetTop-container.offsetTop-2;
if(flag==0){
xx1=x;
yy1=y;
setpixel(xx1,yy1,"#000000",2);
flag=1;
}else{
xx2=x;
yy2=y;
setpixel(xx2,yy2,"#000000",2);
DDALine(xx1,yy1,xx2,yy2);
flag=0;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处