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>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = gbk">
<Title> Bouton DRAW </TITME>
</ head>
<body>
<Alevas> Votre navigateur ne prend pas en charge Canvas, veuillez mettre à niveau votre navigateur! </ canvas>
<script type = "text / javascript">
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>