如何在html页面中画圆圈？
Posted
技术标签:
【中文标题】如何在html页面中画圆圈？【英文标题】：How to draw circle in html page? 【发布时间】：2011-10-18 19:19:07 【问题描述】：如何使用 html5 和 CSS3 绘制圆？
里面也可以放文字吗？
【问题讨论】：
只是一个圈子：***.com/questions/4840736/…。带文字的圆圈：***.com/questions/4861224/…. 【参考方案1】：您可以使用border-radius 属性为其赋予一个与元素的border-radius 等效的border-radius。例如：
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>
（使用 -moz 和 -webkit 扩展的原因是为了支持 Gecko 和 Webkit 的 CSS3 最终版本。）
this page 上有更多示例。至于插入文本，你可以这样做，但你必须注意定位，因为大多数浏览器的框填充模型仍然使用外部正方形。
【讨论】：
【参考方案2】：你不能画一个圆本身。但你可以制作与圆形相同的东西。
您必须创建一个圆角矩形（通过border-radius），其宽度/高度是您要制作的圆的一半。
#circle
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
<div id="circle"></div>【讨论】：
再想一想，你可能想贴一个 在那个 中以确保它被显示。否则，浏览器可能会忽略它。 我认为这个答案是错误的，因为它说你不能在 HTML5 中画一个圆圈。 Canvas 是一个 HTML5 元素，你可以在 HTML5 中画一个圆圈 (w3schools.com/html/html5_canvas.asp) 使用-webkit-border-radius: 100%; -moz-边界半径：100%；边界半径：100%；这样，您只需要自定义宽度和高度即可在将来应用您的更改 您必须添加边框才能使其可见。 我发现使用border-radius: 50%; 效果很好，可以根据需要更改大小。对于颜色，您可以使用background-color 或border。【参考方案3】：
你可以使用border-radius属性，或者制作一个高度和宽度固定的div，背景为png圆形。
【讨论】：
【参考方案4】：border-radius:50% 如果您希望圆圈调整到容器的任何尺寸（例如，如果文本是可变长度的）
不要忘记 （不再需要前缀）-moz- 和 -webkit- 前缀！
div
border-radius: 50%;
display: inline-block;
background: lightgreen;
.a
padding: 50px;
.b
width: 100px;
height: 100px;
<div class='a'></div>
<div class='b'></div>【讨论】：
您必须确保宽度和高度相等，否则会创建一个椭圆形。【参考方案5】：这在 HTML 5 中是完全可能的。您的选择是：Embedded SVG 和 <canvas> tag。
在嵌入式 SVG 中画圆：
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>圈在<canvas>：
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()<canvas id="circlecanvas" width="100" height="100"></canvas>【讨论】：
【参考方案6】：技术上没有办法用 HTML 画圆（没有<circle> HTML 标签），但可以画圆。
绘制一个的最佳方法是将border-radius: 50% 添加到诸如div 之类的标签中。这是一个例子：
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
【讨论】：
【参考方案7】：您可以使用一些 unicode 圆圈：
* font-size: 50px; ○
◌
◍
◎
●更多形状here.
如果您愿意，可以在圆圈上叠加文字：
#container
position: relative;
#circle
font-size: 50px;
color: #58f;
#text
z-index: 1;
position: absolute;
top: 21px;
left: 11px;
<div id="container">
<div id="circle">●</div>
<div id="text">a</div>
</div>如果您希望它在不同系统上看起来相同的可能性更高，您也可以使用自定义字体（如this），因为并非所有计算机/浏览器都安装了相同的字体。
【讨论】：
【参考方案8】：截至 2015 年，您可以使用少至 15 行 CSS (Fiddle) 将文本居中：
body
background-color: #fff;
#circle
position: relative;
background-color: #09f;
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 200px;
#text
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle with text</title>
</head>
<body>
<div id="circle">
<div id="text">Text in the circle</div>
</div>
</body>
</html>没有任何-webkit-s，它适用于 IE11、Firefox、Chrome 和 Opera，并且是有效的 HTML5（实验性）和 CSS3。
在 MS Edge (2020) 上也是如此。
【讨论】：
【参考方案9】：<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->
【讨论】：
虽然此代码可能会回答问题，但提供有关 why 和/或 如何 回答问题的额外上下文将显着改善其长期价值。请edit你的答案添加一些解释。【参考方案10】：.at-counter-box
border: 2px solid #1ac6ff;
width: 150px;
height: 150px;
border-radius: 100px;
font-family: 'Oswald Sans', sans-serif;
color:#000;
.at-counter-box-content
position: relative;
.at-counter-content span
font-size: 40px;
font-weight: bold ;
text-align: center;
position: relative;
top: 55px;
【讨论】：
【参考方案11】：h1
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
<h1> <br>hello world</h1>【讨论】：
【参考方案12】： <head>
<style>
#circle
width:200px;
height:200px;
border-radius:100px;
background-color:red;
</style>
</head>
<body>
<div id="circle"></div>
</body>
简单和新手:)
【讨论】：
【参考方案13】：.circle
height: 65px;
width: 65px;
border-radius: 50%;
border:1px solid red;
line-height: 65px;
text-align: center;
<div class="circle"><span>text</span></div>【讨论】：
【参考方案14】：如果您使用 sass 编写 CSS，您可以这样做：
@mixin draw_circle($radius)
width: $radius*2;
height: $radius*2;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
.my-circle
@include draw_circle(25px);
background-color: red;
哪些输出：
.my-circle
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
在这里试试：https://www.sassmeister.com/
【讨论】：
【参考方案15】：只需在脚本标签中执行以下操作：
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>然后你就得到了你的圈子。
【讨论】：
这应该是哪种语言？ OP 询问了 HTML5 和 CSS3。 这可以使用我在第一行@ClausWilke 中提到的脚本标签在 html 中完成 请提供一个完整的示例，然后说明您如何在 HTML 文档中使用它。有关完整示例的示例，请参阅this answer。 我认为这应该有助于您无法理解的内容，如果您愿意的话，我可以添加一张结果图片，说明圆圈的样子。 . . 没必要。我把它变成了一个代码sn-p。当您单击按钮时它会运行。【参考方案16】：border-radius: 50%; 会将所有元素变成一个圆圈，无论大小。至少，只要目标的height和width相同，否则会变成椭圆形。
#target
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
<div id="target"></div>注意：browser prefixes are not needed anymore for border-radius
或者，您也可以使用clip-path: circle(); 将元素变成圆形。即使元素的width 比height 大（或相反），它仍然会变成圆形，而不是椭圆形。
#target
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
<div id="target"></div>注意：clip-path is not (yet) supported by all browsers
您可以在圆圈内放置文字，只需将文字写在目标标签内即可，如下：
<div>text</div>
如果您想在圆圈中居中文本，您可以执行以下操作：
#target
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
#text
width: 100%;
text-align: center;
<div id="target">
<div id="text">text</div>
</div>【讨论】：
感谢您提及剪辑路径！【参考方案17】：以下是我的 9 个解决方案。随意在 div 或 svg 元素中插入文本。
-
边界半径
剪辑路径
html 实体
伪元素
径向渐变
svg 圆和路径
画布弧（）
img 标签
前置标签
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#B90136';
ctx.fill();#circle1
background-color: #B90136;
width: 100px;
height: 100px;
border-radius: 50px;
#circle2
background-color: #B90136;
width: 100px;
height: 100px;
clip-path: circle();
#circle3
color: #B90136;
font-size: 100px;
line-height: 100px;
#circle4::before
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #B90136;
#circle5
background-image: radial-gradient(#B90136 70%, transparent 30%);
height: 100px;
width: 100px;
<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 html entity</h3>
<div id="circle3">⬤</div>
<hr/>
<h3>4 pseudo element</h3>
<div id="circle4"></div>
<hr/>
<h3>5 radial-gradient</h3>
<div id="circle5"></div>
<hr/>
<h3>6 svg circle & path</h3>
<svg >
<circle cx="50" cy="50" r="50" fill="#B90136" />
</svg>
<hr/>
<h3>7 canvas arc()</h3>
<canvas id="myCanvas" ></canvas>
<hr/>
<h3>8 img tag</h3>
<img src="circle.png" />
<hr/>
<h3>9 pre tag</h3>
<pre style="line-height:8px;">
+++
+++++
+++++++
+++++++++
+++++++++++
+++++++++++
+++++++++++
+++++++++
+++++++
+++++
+++
</pre>【讨论】：
【参考方案18】：这是我用于 CS 1.6 统计网站的圆圈。 一个漂亮的四色圆圈。
#circle
border-top: 8px ridge #d11967;
border-right: 8px ridge #d32997;
border-bottom: 8px ridge #5246eb;
border-left: 8px ridge #fc2938;
border-radius: 50%; width: 440px; height: 440px;
<div id="circle"></div>您还可以使用 skewY()、skewX() 和 rotate() 进行旋转和倾斜：
transform: rotate(60deg);
transform: skewY(-5deg);
transform: skewX(-15deg);
【讨论】：
蓝色和粉色部分的阴影在错误的一侧，但除了出色的 3D 效果。 您可以根据需要更改！【参考方案19】： 没有宽度和要求（只指定你喜欢的那个） 没有 SVG、画布或 Unicode.circle
background: green;
border-radius: 50%;
width: 1rem;
aspect-ratio: 1/1;
<div class="circle"></div>浏览器支持：
Chrome/Edge 88+ Firefox 83+ 背后的标志【讨论】：
以上是关于如何在html页面中画圆圈？的主要内容，如果未能解决你的问题，请参考以下文章