一个用JS作的简单的画图程序,可改画线粗细和顡色,觉得挺有意思的,所以放上来,以供相互学习

本文链接：https://blog.csdn.net/Ant_cc/article/details/1566463

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
font-size: x-small;
}
</style>
</head>

}
function cut1()
{
if(w>1&&h>1)
{
w-=1;
h-=1;
}
}
function catchMouse()
{

var x=event.clientX-50;
var y=event.clientY-52;

makedot(x,y);
window.setTimeOut('catchMouse()',3);

}
function makedot(x,y){

var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd","<hr style='position:absolute;left:"+x+"px;top:"+y+"px;width:"+w+"px;height:"+h+"px;color:"+col+";'>");

}
function changeColor(a)
{
col=a.value;
}

function circle(xx1,yy1,xx2,yy2){
var x,y,r;
x=xx1;
y=yy1;
r=Math.sqrt(Math.abs(xx1-xx2)*Math.abs(xx1-xx2)+Math.abs(yy1-yy2)*Math.abs(yy1-yy2));
var dotx,doty,radio;
var Pi=Math.PI;
makedot(x,y);
for(var i=0;i<360;i+=0.5){
  radio=i*Pi/180;
  dotx=r*Math.cos(radio)+x;
  doty=r*Math.sin(radio)+y;
  makedot(dotx,doty);
}
}

}
var spStr;
function drawCancel()
{
var sp=document.getElementById("sspp");
if(preStringLength<lastStringLength)
spStr=sp.innerHTML.substring(preStringLength+1,lastStringLength);
sp.innerHTML=sp.innerHTML.substring(0,preStringLength);
}
function drawRedo()
{
var sp=document.getElementById("sspp");
sp.insertAdjacentHTML("BeforeEnd",spStr);
}
</script>

<body>

</span>
<form action="" style="position:absolute;top:550px;left:50px; ">
<input type="button" onClick="drawCancel()" name="cancel" value="undo">
<input type="button" onClick="drawRedo()" name="cancel" value="redo">
<input type="button" onClick="add1()" name="add" value="+">
<input type="button" onClick="cut1()" name="cut" value="-">
<input type="button" onClick="draw(0)" name="point" value="点">
<input type="button" onClick="draw(1)" name="line" value="线">
<input type="button" onClick="draw(2)" name="circle" value="圆">

<select id="col" onChange="changeColor(this)">
<option value="black">black</option>
<option value="blue">blue</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="red">red</option>
<option value="pink">pink</option>
</select>
</form>

</body>

</html>