Kommentar: In diesem Artikel wird hauptsächlich die Wirkung der vier mit JavaScript und HTML5 -Leinwand gezogenen Gradientenfarbenspieltasten eingeführt. Freunde, die es brauchen, können sich darauf beziehen.
<Canvas> </canvas> ist ein neues Tag, das in HTML5 angezeigt wird. Wie alle DOM -Objekte verfügt es über eigene Eigenschaften, Methoden und Ereignisse, einschließlich Zeichnungsmethoden. JS kann es zum Zeichnen anrufen. In diesem Artikel wird das Canvas-Tag und JavaScript verwendet, um einen Four-Farb-Gradienten-Play-Button-Effekt zu zeichnen. Das Effektbild:
Implementierungscode:
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text/html; charset = gbk">
<title> Schaltfläche Zeichnen </title>
</head>
<body>
<Canvas> Ihr Browser unterstützt keine Leinwand. Bitte aktualisieren Sie Ihren Browser! </canvas>
<script type = "text/javaScript">
var canvas = document.getElementById ('mycanvas');/*Holen Sie sich die definierte Leinwand*/
var ctx = canvas.getContext ('2d');/*Zeichnen Sie eine 2-dimensionale Umgebung*/
DrawPlayButton (CTX, 200.200);
DrawPlayButton (CTX, 400.200);
DrawPlayButton (CTX, 300.200);
Funktion DrawPlayButton (_context, x, y) {
var nradius = 30; // Radius
_context.save ();
_context.translate (x, y);
// Baulinienwechsel
var gelbgrad = _context.createlineargradient (30,0,0,30);
Yellowgrad.AddcolorStop (0, '#fccb02');
Yellowgrad.AddColorStop (0,5, '#fbf14d');
Yellowgrad.AddcolorStop (1, '#ffcb02');
var bluegrad = _context.createlineargradient (30,0,0,30);
bluegrad.addcolorstop (0, '#2a459c');
Bluegrad.AddcolorStop (0,5, '#0E7ADC');
Bluegrad.AddColorStop (1, '#2A459E');
var Redgrad = _context.createlineargradient (30,0,0,30); // Drehen durch Drehen
Redgrad.AddcolorStop (0, '#D0372F');
Redgrad.AddcolorStop (0,5, '#e0675e');
Redgrad.AddcolorStop (1, '#CE392d');
var greengrad = _context.createlineargradient (30,0,0,30); // Drehen durch Drehen
greengrad.addcolorstop (0, '#059700');
greengrad.addcolorstop (0,5, '#02e003');
greengrad.addcolorstop (1, '#019a02');
// Zeichne den Winkel von zwei Bögen
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);
// Innenkreisfarbe
var lingrad = _context.createlineargradient (-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, '#eeedfc');
_context.save ();
_context.beginPath (); // innerer Kreis
_context.FillStyle = lingrad;
_context.arc (0,0, nradius-10,0, math.pi*2, true);
_context.fill ();
_context.closepath ();
_context.restore ();
// Dreieck zeichnen
var trianglerad = _context.createlineargradient (-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 ();
}
// einen Lüfter zeichne
Funktion DrawCake (_context, _nrotateangle, _fillcolor, _nradius) {
_context.save ();
_context.beginPath ();
_context.FillStyle = _fillcolor;
_context.rotate (_nrotateangle);
_context.moveto (_nradius-10,0);
_context.lineto (_nradius, 0); // Zeichne eine Zeile nach rechts
_context.arc (0,0, _nradius, 0, math.pi/2, false);
_context.lineto (0, _nradius-10); // Zeichnen Sie einen nach oben
_context.arc (0,0, _nradius-10, math.pi/2,0, true); // Zeichnen Sie den inneren Bogen gegen den Uhrzeigersinn
_context.fill ();
_context.closepath ();
_context.restore ();
}
</script>
</body>
</html>