87,901
社区成员
发帖
与我相关
我的任务
分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<div id="1" class="style1">
<input id="x" type="text" style="width:100px; margin-right:10px;" />
<input id="y" type="text" style="width:100px; margin-right:10px;" />
<input id="r" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="画图" onclick="circle()" />
<input type="button" value="画方" onclick="rect()" />
</div>
</body>
<span class="style1">
<script type="text/javascript">
function makedot(x,y){ //画点函数
document.write("<div style='height:1px;position:fixed;left:"+x+"px;top:"+y+"px;width:1px;background:#f00'></div>")
}
function circle(){ //(x,y)圆心,r半径
var dotx,doty,radio,r,x,y;
var Pi=Math.PI;
r=document.getElementById("r").value;
x=document.getElementById("x").value;
y=document.getElementById("y").value;
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);
}
}
function rect(){ //(x,y)左上角坐标,w,h 宽与高
var x,y,h;
x=document.getElementById("x").value;
y=document.getElementById("y").value;
h=document.getElementById("r").value;
for(var i=0;i<h;i++){
makedot(x+i,y);
makedot(x+i,y+h);
}
for(var i=0;i<h;i++){
makedot(x,y+i);
makedot(x+h,y+i);
}
}
</script>
</span>
</html>
<div id="1" class="style1">
<input id="x" type="text" style="width:100px; margin-right:10px;" />
<input id="y" type="text" style="width:100px; margin-right:10px;" />
<input id="r" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="画图" onclick="circle()" />
<input type="button" value="画方" onclick="rect()" />
<input type="button" value="清除" onclick="del()" />
</div>
<div id="canvas">
</div>
<script type="text/javascript">
function makedot(x,y){ //画点函数
var div = document.createElement("div");
div.style.position="fixed";
div.style.width="1px";
div.style.height="1px";
div.style.left=x+"px";
div.style.top=+y+"px";
div.style.background="#f00";
document.getElementById("canvas").appendChild(div);
}
function circle(){ //(x,y)圆心,r半径
var dotx,doty,radio,r,x,y;
var Pi=Math.PI;
r=document.getElementById("r").value*1;
x=document.getElementById("x").value*1;
y=document.getElementById("y").value*1;
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);
}
}
function rect(){ //(x,y)左上角坐标,w,h 宽与高
var x,y,h;
x=document.getElementById("x").value*1;
y=document.getElementById("y").value*1;
h=document.getElementById("r").value*1;
for(var i=0;i<h;i++){
makedot(x+i,y);
makedot(x+i,y+h);
}
for(var i=0;i<h;i++){
makedot(x,y+i);
makedot(x+h,y+i);
}
}
function del()
{
document.getElementById("canvas").innerHTML = "";
}
</script>
话说,要绘图用<canvas>多好
<div id="1" class="style1">
<input id="x" type="text" style="width:100px; margin-right:10px;" />
<input id="y" type="text" style="width:100px; margin-right:10px;" />
<input id="r" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="画图" onclick="circle()" />
<input type="button" value="画方" onclick="rect()" />
</div>
<script type="text/javascript">
function makedot(x,y){ //画点函数
var div = document.createElement("div");
div.style.position="fixed";
div.style.width="1px";
div.style.height="1px";
div.style.left=x+"px";
div.style.top=+y+"px";
div.style.background="#f00";
document.body.appendChild(div);
}
function circle(){ //(x,y)圆心,r半径
var dotx,doty,radio,r,x,y;
var Pi=Math.PI;
r=document.getElementById("r").value*1;
x=document.getElementById("x").value*1;
y=document.getElementById("y").value*1;
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);
}
}
function rect(){ //(x,y)左上角坐标,w,h 宽与高
var x,y,h;
x=document.getElementById("x").value*1;
y=document.getElementById("y").value*1;
h=document.getElementById("r").value*1;
for(var i=0;i<h;i++){
makedot(x+i,y);
makedot(x+i,y+h);
}
for(var i=0;i<h;i++){
makedot(x,y+i);
makedot(x+h,y+i);
}
}
</script>