Как нарисовать круг на HTML-странице? - PullRequest
Новая
       60

Как нарисовать круг на HTML-странице?

101 голосов
/ 03 августа 2011

Как вы рисуете круг, используя HTML5 и CSS3?

Возможно ли поместить текст внутрь?

Ответы [ 16 ]

2 голосов
/ 19 декабря 2017

Просто сделайте следующее в тегах скрипта: 

<!Doctype html>
<html>
<head>
	<title>Circle Canvas</title>
</head>
<body>
	<canvas id="myCanvas" width="300" height="150" 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>

А вот и ты, у тебя есть свой круг.

1 голос
/ 13 марта 2017 
   <head>
       <style>

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       </style>
   </head>

    <body>
       <div id="circle"></div>
   </body>

просто и новичок:)

1 голос
/ 31 августа 2016 

  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>
1 голос
/ 31 мая 2016 
.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;
}
0 голосов
/ 29 мая 2017

Если вы используете 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/

0 голосов
/ 31 мая 2016 

<div class="at-counter-box-content">

  <div class="at-counter-content">

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

Страница:
...