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

1. Paramètres requis par arc

Copier le code Le code est le suivant :

arc(x, y, rayon, startAngle, endAngle, sens inverse des aiguilles d'une montre);

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

2. Ce qui suit explique startAngle et endAngle à travers des exemples (notez que je n'ai pas écrit le code html)

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

Je règle l'angle de départ sur 0 et l'angle de fin sur 1, comme indiqué ci-dessous

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

Je règle l'angle de départ sur 1 et l'angle de fin sur 2, comme indiqué ci-dessous

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

3. Dans le sens inverse des aiguilles d'une montre, on entend le sens inverse des aiguilles d'une montre (vrai) ou le sens des aiguilles d'une montre (faux)

Vous voyez, quand je règle le point de départ sur 0, le point final sur 1, et que je choisis dans le sens des aiguilles d'une montre

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

Lorsque je règle le point de départ sur 0, le point final sur 1 et que je sélectionne dans le sens inverse des aiguilles d'une montre

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

Le contenu ci-dessus est l'introduction de l'éditeur sur la façon d'utiliser l'arc de fonction JavaScript pour dessiner un cercle sur une page Web. J'espère que vous l'aimerez.