Tengo una página HTML muy simple con un elemento Canvas.
Cuando paso el cuarto parámetro de arco como Math.PI * 2 , obtengo el círculo rojo que esperaba, pero cuando trato de hacer lo mismo pasando 3.1415 * 2 , no obtengo ningún círculo rojo.
Espero que en ambos casos obtenga el mismo resultado con un círculo rojo.
const canvas = document.getElementById("solar-canvas"); const context = canvas.getContext("2d", { alpha: false }); context.beginPath(); context.fillStyle = "red"; //const val = Math.PI * 2; const val = 3.1415 * 2; context.arc(190,150, 9, 0, val, true); context.fill(); context.closePath(); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Simple Solar System</title> </head> <body>xxx <canvas id="solar-canvas" width="380" height="300" style="border: 1px solid #aaaaaa" ></canvas> </body> </html>Creo que lo que estás experimentando se ve mejor en un ejemplo:
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); let end = 0 function draw() { context.clearRect(0, 0, 90, 90) context.beginPath() context.arc(22, 40, 20, 0, end, true); context.stroke(); context.beginPath() context.arc(65, 40, 20, 0, end); context.fillText(end, 10,10) context.stroke(); end += 0.05 } setInterval(draw, 100) <canvas id="canvas" width="90" height="90"></canvas> 3.1415 * 2 está cerca de Math.PI * 2 pero no es exactamente lo mismo...
No falla solo que el arco es muy pequeño
PI 3.14159265... podría redondearse a 3.1416
si usa eso en su arco en sentido contrario a las agujas del reloj, obtendrá el círculo completo.
Hay algunas rarezas con ese último parámetro en sentido contrario a las counterclockwise del reloj, por qué con números grandes sigue eliminando el arco que podría ser una pregunta interesante para investigar.