HTML画空心圆

最新推荐文章于 2024-04-01 00:00:00 发布

牛奶爱上了咖啡

最新推荐文章于 2024-04-01 00:00:00 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xunannan0624/article/details/52829259

这篇博客展示了如何利用HTML、CSS和JavaScript实现空心圆的动态绘制。通过JavaScript函数`emptyCircle`，结合数学计算，动态创建并定位`span`元素来形成空心圆的轮廓。用户可以通过点击按钮触发画圆过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>