这个画圆画方的功能怎么实现不了

Question

javascripthtmlutf-8

Answer 1

document.write()一般只在页面加载完成之前使用。
当页面加载完成之后，就不要用document.write()了
再用document.write()就是重新创建一个新的页面。
<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>

Answer 2

<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>多好

Answer 3

如果我做百度地图api开发时需要绘图，选点是根据地图上的坐标，请问还可以使用这种方法吗