Draw circle in Html5

Asked

Viewed 813 times

9

I’d like to draw that circle

inserir a descrição da imagem aqui

But that’s all I got here yet

function draw()
  {
    var canvas = document.getElementById('circle');
    if (canvas.getContext)
    {
      var ctx = canvas.getContext('2d'); 
      var X = canvas.width / 2;
      var Y = canvas.height / 2;
      var R = 45;
      ctx.beginPath();
      ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
      ctx.lineWidth = 3;
      ctx.strokeStyle = '#FF0000';
      ctx.stroke();
    }
 }
  <html>
     <head>
       <meta charset=utf-8 />
       <title>Draw a circle</title>
     </head>
     <body onload="draw();">
        <canvas id="circle" width="150" height="150"></canvas>
     </body>
  </html>

How would I use css for him?

javascript html css
  • 1

    But you want it in canvas or CSS? And SVG is an option?

  • In fact, I accept suggestions

  • It can be in a way that I can color dynamically

2 answers

8

Here is a simple option with SVG, tried to leave in the most didactic way possible, the idea is to use a "dotted line" on the edge of a circle svg and how the stroke-dasharray and the stroke-dashoffset vc controls the chart fill. It’s nothing too complex, and you can control all properties with JS and CSS. Everything is centralized with flex in the container and position:absolute in children.

inserir a descrição da imagem aqui

Enjoy and includes an option animating the stroke-dashoffset for you to see how easy it is to animate the chart just using CSS with @keyframes

inserir a descrição da imagem aqui

Segment the image code above. 

body {
  display: flex;
}

.graph {
  text-align: center;
  width: 100px;
  height: 100px;
  line-height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
  stroke-width: 12px;
  stroke: #ddd;
}

.graph svg.cor {
  stroke: green;
  stroke-dasharray: 255;
  stroke-dashoffset: 55;
  transform: rotate(-90deg);
  transform-origin: center;
}

.graph svg.cor-anim {
  stroke: red;
  stroke-dashoffset: 255;
  animation: anim 5s infinite;
}

@keyframes anim {
  45% {
    stroke-dashoffset: 55;
  }
  55% {
    stroke-dashoffset: 55;
  }
}
<div class="graph">
	<svg>
		<circle cx="50" cy="50" r="40" />
	</svg>
	<svg class="cor">
		<circle cx="50" cy="50" r="40" />
	</svg>
	Btn
</div>
<div class="graph">
	<svg>
		<circle cx="50" cy="50" r="40" />
	</svg>
	<svg class="cor cor-anim">
		<circle cx="50" cy="50" r="40" />
	</svg>
	Btn
</div>

In this answer you have more details in a similar model only in a rect in the hover of link: Partially paint edge in css

And in this other one there’s something similar only with CSS, and as you can see in the future with conic-gradiente you will be able to do this only with CSS: How could you make a Pacman by moving your mouth with pure CSS?

7


I basically reused your code to make another arc, only in the second arc we’ll start drawing the same from point 1*PI and in the opposite direction of the clock hands.

inserir a descrição da imagem aqui

The Arc function has the following parameters:

ctx.arc(posicao X, posicao Y, raio, inicio do arco (angulo), fim do arco (angulo), sentido dos ponteiros do relogio)

Reference 

<html>
     <head>
       <meta charset=utf-8 />
       <title>Draw a circle</title>
     </head>
     <script>
     	function draw(){
  var canvas = document.getElementById('circle');
  if (canvas.getContext)
  {
    var ctx = canvas.getContext('2d'); 
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 45;
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 20;
    ctx.strokeStyle = '#eeeeee';
    ctx.stroke();
    // novo circulo
    ctx.beginPath();
    ctx.arc(X, Y, R, Math.PI, -0.5 * Math.PI, true);
    ctx.lineWidth = 20;
    ctx.strokeStyle = '#00a65a';
    ctx.stroke();
  }
}
     </script>
     <body onload="draw();">
        <canvas id="circle" width="150" height="150"></canvas>
     </body>
  </html>

  • Cool! , Now I can in css to put the text inside the circle, it is not?

  • For this purpose it is better to see comrade @hugocsl’s reply

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.