9

Gostaria de desenhar esse cícrculo

inserir a descrição da imagem aqui

Mas, só consegui isso aqui ainda

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>

Como usaria o css pra ele?

3
  • 1
    Mas vc quer em canvas ou CSS? E o SVG é uma opção?
    – hugocsl
    Commented 27/02/2019 às 12:12
  • Na verdade, aceito sugestão rs Commented 27/02/2019 às 12:13
  • Pode ser de um jeito que eu possa colorir dinamicamente Commented 27/02/2019 às 12:14

2 Respostas 2

8

Aqui tem uma opção simples com SVG, tentei deixar da maneira mais didática possível, a ideia é usar uma "linha pontinhada" na borda de um circle svg e como o stroke-dasharray e o stroke-dashoffset vc controla o preenchimento do gráfico. Não é nada muito complexo, e vc consegue controlar todas as propriedades com JS e CSS. Tudo é centralizado com flex no container e position:absolute nos filhos.

inserir a descrição da imagem aqui

Aproveite e inclui uma opção animando o stroke-dashoffset para vc ver como é fácil animar o gráfico apenas usando CSS com @keyframes

inserir a descrição da imagem aqui

Sego o código da imagem acima.

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>

Nessa resposta tem mais detalhes em um modelo semelhante só que em um rect no hover do link: Pintar parcialmente a borda em css

E nessa outra tem algo similar apenas com CSS, e como vc pode ver no futuro com conic-gradiente vc vai conseguir fazer isso apenas com CSS: Como poderia fazer um pacman mexendo a boca com CSS puro?

7

Basicamente reutilizei o seu código para fazer outro arco, só que no segundo arco vamos começar a desenhar o mesmo a partir do ponto 1*PI e no sentido contrário dos ponteiros do relógio.

inserir a descrição da imagem aqui

A função arc tem os seguintes parâmetros:

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

Referência

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

2
  • Legal!, Agora posso no css para colocar o texto dentro do círculo, não é? Commented 27/02/2019 às 12:48
  • Para esse efeito é melhor ver a resposta do camarada @hugocsl
    – lazyFox
    Commented 27/02/2019 às 14:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .