Programing

HTML 페이지에서 원을 그리는 방법?

lottogame 2020. 8. 12. 22:08
반응형

HTML 페이지에서 원을 그리는 방법?

HTML5 및 CSS3를 사용하여 원을 어떻게 그리나요?

안에 텍스트를 넣을 수도 있습니까?

그 자체로는 원을 그릴 수 없습니다. 하지만 원과 똑같은 것을 만들 수 있습니다.

만들려 는 원 의 너비 / 높이 의 절반 인 둥근 모서리 (경유 border-radius)가 있는 사각형 을 만들어야합니다.

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>

HTML 5 에서는 가능합니다 . 옵션은 임베디드 SVG 및 <canvas>태그 입니다.

포함 된 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>

사용할 수있는 몇 가지 유니 코드 서클이 있습니다.

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

여기에 더 많은 모양이 있습니다 .

다음과 같은 경우 원에 텍스트를 오버레이 할 수 있습니다.

#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">&#x25CF;</div>
    <div id="text">a</div>
</div>

모든 컴퓨터 / 브라우저에 동일한 글꼴이 설치되어 있지 않기 때문에 다른 시스템에서 동일하게 보일 가능성이 더 높은 경우 사용자 지정 글꼴 (예 : 이 글꼴)을 사용할 수도 있습니다 .

border-radius:50% 컨테이너가 가져 오는 크기에 따라 원을 조정하려는 경우 (예 : 텍스트가 가변 길이 인 경우)

-moz-및 -webkit-접두사를 잊지 마세요 !

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, Windows7에서 작동하며 유효한 HTML5 (실험용) 및 CSS3입니다.

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;">&nbsp;</div>

(The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit.)

There are more examples on this page. As far as inserting text, you can do it but you have to be mindful of the positioning, as most browsers' box padding model still uses the outer square.

There is not technically a way to draw a circle with HTML (there isn’t a <circle> HTML tag), but a circle can be drawn.

The best way to draw one is to add border-radius: 50% to a tag such as div. Here’s an example:

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>

border-radius: 50%; will turn all elements into a circle, regardless of size. At least, as long as the height and width of the target are the same, otherwise it will turn into an oval.

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}
<div id="target"></div>

Note: browser prefixes are not needed anymore for border-radius

Alternatively, you can use clip-path: circle(); to turn an element into a circle as well. Even if the element has a greater width than height (or the other way around), it will still become a circle, and not an oval.

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}
<div id="target"></div>

In fact, you can use clip-path to turn elements into all kinds of shapes

Note: clip-path is not (yet) supported by all browsers

You can place text inside of the circle, simply by writing the text inside of the tags of the target,
like so:

<div>text</div>

If you want to center text in the circle, you can do the following:

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

You can use border-radius property, or make a div with fixed height and width and a background with png circle.

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

Simply do the following in the script tags:

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

And there you go you got your circle.

  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>

.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;
}

   <head>
       <style>

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

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

simple and novice :)

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

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

      <span>40%</span>

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

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

If you're using sass to write your CSS you can do:

@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;
}

Which outputs:

.my-circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background-color: red;
}

Try it here: https://www.sassmeister.com/

참고URL : https://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page

반응형

'Programing' 카테고리의 다른 글

C #, .NET에서 사운드를 재생하는 방법  (0) 2020.08.12
Twitter 부트 스트랩-탭-URL이 변경되지 않음  (0) 2020.08.12
두 목록 간의 공통 요소 비교  (0) 2020.08.12
UIWebView에서 확대 / 축소 / 핀치 활성화  (0) 2020.08.12
Sublime-특정 값을 포함하는 모든 줄 삭제  (0) 2020.08.12

'Programing'의 다른글

  • 현재글HTML 페이지에서 원을 그리는 방법?

관련글

댓글

티스토리툴바