Lo he estado estudiando con vuestro Manual de Canvas y no era tan difícil después de todo.
Dejo mi código por si a alguien le pudiera servir.
Se debe utilizar el método arc del objeto CanvasRenderingContext2D, que permite hacer arcos, pero también círculos completos.
<!DOCTYPE html>
<html>
<body>
<canvas id="miCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Si lees esto es que tu navegador no soporta el elemento canvas de HTML
</canvas>
<script>
let canvas = document.getElementById("miCanvas");
let ctx = canvas.getContext("2d");
// El primer círculo
ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI);
ctx.stroke();
// El segundo círculo
ctx.beginPath();
ctx.arc(250, 250, 150, 0, 2 * Math.PI);
ctx.stroke();
// El tercer círculo
ctx.beginPath();
ctx.arc(250, 250, 200, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Este código dibuja tres círculos concéntricos con radios de 100, 150 y 200 pixels cada uno. Los he puesto todos centrados en el punto (250 x 250) y así son concéntricos. Por supuesto, el elemento canvas tiene que ser suficientemente grande para que se puedan ver todos ellos.
El método implicado es arc(x, y, radio, angulo_inicial, angulo_final):
- x, y: toma las coordenadas del centro del círculo.
- radio: el radio del círculo.
- angulo_inicial, angulo_final: el ángulo de inicio y fin para dibujar el círculo.
- 2 * Math.PI es la vuelta necesaria para dibujar un círculo completo.
Espero que os sirva si estáis probando a hacer cosas con el elemento Canvas de HTML5.
Marcos
172
2
15
11