HTML画空心圆

来源：互联网发布：网络协议主要由组成编辑：程序博客网时间：2024/04/28 10:35

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
span{position:absolute; color: red}/*设置颜色*/

</style>
<script type="text/javascript">

//////////////////////////////////////////画空心圆/////////////////////////////////////////////
function emptyCircle(){
// 函数名半径，圆心:x,y 画多少度,每个多少毫秒调用一次
setInterval('showEmptyCircle(100,800,200,360)','20');
}
var i=0;//角度
var pi=Math.PI;//3.14
var x,y;//x,y轴
// 半径，圆心:x,y 画多少度
function showEmptyCircle(r,_x,_y,rad){
//当角度大于设定弧度时，停止
if(i>=rad){
return false;
}
x=Math.cos(pi/180*i)*r+_x;
y=Math.sin(pi/180*i)*r+_y;
//画圆边框
var o=document.createElement("span");
o.appendChild(document.createTextNode("."));
document.body.appendChild(o);
o.style.left=x+"px";
o.style.top=y+"px";

//画圆心
var corn=document.createElement("span");
corn.appendChild(document.createTextNode("."));
document.body.appendChild(corn);
corn.style.left=_x+"px";
corn.style.top=_y+"px";

i+=1;

}
</script>
</head>
<body>
<input type="button" value="画空心圆" onClick="emptyCircle()"><br>
</body>

</html>

0 0