87,996
社区成员
发帖
与我相关
我的任务
分享这个画圆画方的功能怎么实现不了
<!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>
...全文
请发表友善的回复…
发表回复
天际的海浪 2014-12-27
- 打赏
- 举报
可以，只要相对坐标定位设置好就行
wycole 2014-12-27
- 打赏
- 举报
如果我做百度地图api开发时需要绘图，选点是根据地图上的坐标，请问还可以使用这种方法吗
天际的海浪 2014-12-27
- 打赏
- 举报
<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>
wycole 2014-12-27
- 打赏
- 举报
如果我想要清除已画的图像呢
天际的海浪 2014-12-26
- 打赏
- 举报
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>
