Commentaire: Avant de faire l'opération de rotation, vous devez comprendre une phrase: la rotation est le système de coordonnées de la toile plutôt que la figure elle-même. Tout d'abord, comprenons les coordonnées du cercle: le centre, l'angle de départ, l'angle d'extrémité; Le suivant est très simple
Avant de faire l'opération de rotation, vous devez comprendre une phrase: le système de coordonnées de la toile est tourné plutôt que la figure elle-même. D'accord, après avoir compris cette phrase, la prochaine chose est très simple.Tout d'abord, comprenons les coordonnées du cercle:
<script linguisse = "javascript">
var cxt = document.getElementByid ('démo'). getContext ("2d");
cxt.beginPath ();
cxt.arc (100,100,50, math.pi * 0,75, math.pi * 1,75, false); / * dessiner un arc semi-circulaire avec la coordonnée centrale de 100 100; Le radian de démarrage est de 0,75, le radian final est de 1,75, le dernier paramètre false = dans le sens horaire, true = dans le sens antihoraire, bien sûr, ce paramètre est facultatif * /
cxt.fillStyle = "# f00"; / * sélectionnez la couleur à utiliser * /
cxt.fill (); / * une étape pour vraiment dessiner la figure sur la toile, dessiner le premier demi-cercle * /
/ * Préfère dessiner le deuxième demi-cercle * /
cxt.beginPath ();
cxt.arc (170,100,50, math.pi * 1.25, math.pi * 0,25, false);
cxt.fillStyle = "# f00";
cxt.fill (); / * dessiner les graphiques dessinés sur la toile * /
cxt.beginPath ();
/ * Faites pivoter la toile dans le sens horaire de 45 degrés. Le paramètre de la fonction rotative est Radians, vous devez donc le convertir * /
cxt.rotate (45 * math.pi / 180);
cxt.fillrect (141.1, -50,100,100); / * La coordonnée de départ est 141,1, -50, et la largeur et la hauteur sont de 100 * /
cxt.fillStyle = "# f00";
cxt.fill ();
cxt.beginPath ();
/ * Faites pivoter la toile à un angle normal * /
cxt.rotate (-45 * math.pi / 180);
cxt.font = "60px Microsoft Yahei";
cxt.strokestyle = "# f00";
cxt.strokeText ("J'adore html5", 0,300); / * deux paramètres, le premier consiste à commencer à dessiner les coordonnées de l'axe X du texte, et la seconde consiste à commencer à dessiner la coordonnée y du texte * /
cxt.stroke ();
/ * Créer un gradient * /
var grd = cxt.CreateLlineargradient (0,45,175,50); / * Les quatre paramètres sont le point de départ du gradient x, y point de terminaison du gradient x, y * / /
grd.addColOrStop (0, "# ff0000");
Grd.AddColOrStop (0,25, "# FFFF00");
Grd.AddColOrStop (0,5, "# 00FF00");
Grd.AddColOrStop (0,75, "# 00FFFF");
Grd.AddColOrStop (1, "# ffff00");
cxt.strokestyle = grd;
cxt.strokeText ("I Love Canvas", 0,400); / * deux paramètres, le premier consiste à commencer à dessiner les coordonnées de l'axe X du texte, et la seconde consiste à commencer à dessiner la coordonnée y du texte * /
cxt.stroke ();
</cript>
Image de reproduction: