Comment utiliser la fonction arc de JavaScript pour dessiner un cercle dans une page Web_javascript skills

1. Paramètres requis par arc

x, y, radius sont tous faciles à comprendre, alors concentrons-nous sur les trois paramètres startAngle, endAngle et antihoraire !

2. Explication détaillée du paramètre d'arc

1. startAngle et endAngle font respectivement référence à l'angle de départ et à l'angle de fin du cercle. Le manuel indique que l'angle de départ est 0 et l'angle de fin est Math.PI*2, afin qu'un cercle puisse être dessiné exactement <.>

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

De ce qui précède, nous pouvons voir que le point final de la première image est le point de départ de la deuxième image, ce qui signifie qu'un cercle a d'innombrables angles. Tant que vous définissez l'angle de départ et l'angle final, il peut relier deux points. la forme d'un arc. Connectez-les! La différence entre le point de départ et le point final est la longueur des deux points sur le graphique ! Lorsque la différence entre le point de départ et le point final peut faire que les deux points coïncident, un cercle se forme ! Sachant cela nous pouvons faire des cercles dynamiques

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, true);
cxt.stroke();