2

Estou iniciando em canvas e apesar de documentos muito bons pela web, surgem dúvidas específicas.
Por exemplo, eu gostaria de colocar um número dentro de um círculo, mas tenho conseguido apenas o número, e não o cículo. Tenho o seguinte código:

var canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');

ctx.arc(100,75,50,0,2*Math.PI);
ctx.font="20px Georgia";
ctx.fillText("1",50,50);
<canvas id="canvas" width="200px" height="200px"></canvas>

6
  • vc nao teria que preencher o circulo primeiro e depois criar o texto? 27/08/2015 às 3:58
  • Como eu disse, ainda estou começando. Imaginei que na terceira linha eu estivesse fazendo exatamente isso. 27/08/2015 às 4:01
  • ctx.beginPath(); tenta isso @edit tem um post no stackoverflow ingles stackoverflow.com/questions/14539837/… desenhe o circulo primeiro depois desenhe o texto em cima 27/08/2015 às 4:18
  • Editei a pergunta conforme o indicado, mas continua sem funcionar... Abri o exemplo da resposta, e ao menos no meu navegador não funcionou. 27/08/2015 às 4:34
  • Funcionou sim @LucasBertollo , eu havia colocado com fundo branco. Coloque essa resposta para que eu aceite, vou voltar a pergunta para o que estava antes... 27/08/2015 às 4:37

1 Resposta 1

2

Segu em exemplo:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');


ctx.beginPath();    
ctx.arc(77,76,75,0,2*Math.PI);
ctx.fillStyle="grey";
ctx.fill();
ctx.stroke();


ctx.beginPath();    
ctx.font="25px Verdana";
ctx.fillStyle="blue";
ctx.fillText("1",50,50);



</script>

</body>
</html>

Para aprender sobre as funções e parametros tem uma literatura boa e prática aqui:

http://www.w3schools.com/html/html5_canvas.asp

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 .