Comment dessiner un cercle en utilisant javascript

Comment dessiner un cercle avec javascript : 1. Définissez les paramètres requis par l'arc ; 2. Définissez startAngle et endAngle ; 3. Définissez la direction de dessin du cercle dans le sens inverse des aiguilles d'une montre.

L'environnement d'exploitation de cet article : système windows7, javascript version 1.8.5, ordinateur DELL G3

Comment dessiner un cercle avec javascript ?

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

L'environnement d'exploitation de cet article : système Windows7, javascript version 1.8.5, ordinateur DELL G3

1 Les réglages des paramètres requis pour. arc

Le code est le suivant :

arc(x, y, radius, startAngle, endAngle, counterclockwise);

x, y, radius sont tous faciles à comprendre, concentrons-nous donc 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. , ce qui est parfait. Dessinez un cercle

2. Expliquons 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();

J'ai défini l'angle de départ sur 0 et le l'angle final à 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();

J'ai réglé l'angle de départ sur 1 et l'angle final sur 2, comme indiqué ci-dessous

D'en haut, nous pouvons voir que le point final de la première image est le point de départ de la deuxième image, c'est-à-dire qu'un cercle a d'innombrables angles tant que vous définissez l'angle de départ et l'angle d'arrivée, il peut relier deux points en forme d'arc ! 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 créer un cercle dynamique

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

Vous voyez, lorsque je règle le point de départ sur 0, le point final sur 1, et 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 choisis 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();

Apprentissage recommandé : "Tutoriel de base javascript"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!