Effet du bouton de jeu de couleur de quatre dégradés dessinés à l'aide de la toile JavaScript et HTML5

Auteur：Eve Cole Date de mise à jour：2025-08-22 04:16:01

Commentaire: Cet article présente principalement l'effet des quatre boutons de jeu de couleur de gradient dessinés à l'aide de la toile JavaScript et HTML5. Les amis qui en ont besoin peuvent y faire référence.

<Aletvas> </ Canvas> est une nouvelle balise qui apparaît dans HTML5. Comme tous les objets DOM, il a ses propres propriétés, méthodes et événements, y compris les méthodes de dessin. JS peut l'appeler pour dessiner. Cet article utilise la balise Canvas et JavaScript pour dessiner un effet de bouton de jeu de gradient en quatre couleurs. L'image de l'effet:

Code d'implémentation:

<html>

<adal>

<Title> Bouton DRAW </TITME>

</ head>

<body>

<Alevas> Votre navigateur ne prend pas en charge Canvas, veuillez mettre à niveau votre navigateur! </ canvas>

var canvas = document.getElementById ('myCanvas'); / * Obtenez le canevas défini * /

var ctx = canvas.getContext ('2d'); / * dessiner dans un environnement bidimensionnel * /

DrawPlayButton (CTX, 200 200);

DrawPlayButton (CTX, 400 200);

DrawPlayButton (CTX, 300 200);

fonction DrawPlayButton (_Context, x, y) {

var nradius = 30; // rayon

_Context.save ();

_Context.Translate (x, y);

// Changement de ligne de construction

var Yellowgrad = _Context.CreateLlineargradient (30,0,0,30);

Yellowgrad.addColOrStop (0, «# fccb02»);

Yellowgrad.AddColorstop (0,5, «# fbf14d»);

Yellowgrad.AddColorstop (1, «# ffcb02»);

var bluegrad = _Context.CreateLlineargradient (30,0,0,30);

Bluegrad.AddColOrStop (0, «# 2A459C»);

Bluegrad.AddColorstop (0,5, «# 0e7adc»);

Bluegrad.AddColorstop (1, «# 2A459E»);

var redgrad = _Context.CreateLlineargradient (30,0,0,30); // Rotation en tournant

redgrad.addColOrStop (0, '# d0372f');

redgrad.addcolorstop (0,5, «# e0675e»);

redgrad.addColorstop (1, «# ce392d»);

var greengrad = _Context.CreateLlineargradient (30,0,0,30); // Rotation en tournant

Greengrad.AddColOrStop (0, '# 059700');

Greengrad.AddColorstop (0,5, «# 02E003»);

Greengrad.AddColOrStop (1, '# 019A02');

// dessine l'angle de deux arcs

Drawcake (_Context, 0, Yellowgrad, Nradius);

Drawcake (_Context, math.pi / 2, bluegrad, nradius);

Drawcake (_Context, math.pi, redgrad, nradius);

Drawcake (_Context, 3 * Math.pi / 2, Greengrad, Nradius);

// Couleur du cercle intérieur

var lingrad = _Context.CreateLlineargradient (-30, -30,30,30);

lingrad.addcolorstop (0, '# 4672df');

lingrad.addcolorstop (0,2, «# 6188e5»);

lingrad.addcolorstop (0,5, «# 98b1ef»);

lingrad.addcolorstop (0,8, «# b1c3f2»);

lingrad.addcolorstop (1, '#eaedfc');

_Context.save ();

_context.beginpath (); // cercle intérieur

_Context.FillStyle = Lingrad;

_Context.arc (0,0, nradius-10,0, math.pi * 2, true);

_Context.fill ();

_Context.closePath ();

_Context.Restore ();

// dessiner le triangle

var trianglerad = _Context.CreateLlineargradient (-6, -10, -6,10);

trianglerad.addcolorstop (0, «# 99d4ea»);

trianglerad.addcolorstop (0,2, «# 5e8fdd»);

trianglerad.addcolorstop (0,5, '# 0f17a1');

trianglerad.addcolorstop (0,8, «# 4c65cc»);

trianglerad.addcolorstop (1, «# 7299e5»);

_Context.beginPath ();

_Context.FillStyle = trianglerad;

_Context.moveto (12,0);

_Context.lineto (-6,10);

_Context.lineto (-6, -10);

_Context.fill ();

_Context.Restore ();

}

// dessine un fan

Fonction Drawcake (_Context, _nrotateAngle, _FillColor, _nradius) {

_Context.save ();

_Context.beginPath ();

_Context.FillStyle = _FillColor;

_Context.rotate (_nrotateAngle);

_Context.moveto (_nradius-10,0);

_context.lineto (_nradius, 0); // tracez une ligne vers la droite

_Context.arc (0,0, _nradius, 0, math.pi / 2, false);

_context.lineto (0, _nradius-10); // en dessiner un vers le haut

_Context.arc (0,0, _nradius-10, math.pi / 2,0, true); // dessine l'arc intérieur dans le sens antihoraire

_Context.fill ();

_Context.closePath ();

_Context.Restore ();

}

</cript>

</docy>

</html>