Canvas de HTML5 - Exemple graphique Code + Diagramme d'effet pour dessiner des arcs et tourner

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

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: