Comentario: Este artículo presenta principalmente el efecto de los botones de juego de color de cuatro gradientes dibujados con el lienzo JavaScript y HTML5. Los amigos que lo necesitan pueden referirse a él.
<Canvas> </Canvas> es una nueva etiqueta que aparece en HTML5. Al igual que todos los objetos DOM, tiene sus propias propiedades, métodos y eventos, incluidos los métodos de dibujo. JS puede llamarlo para dibujar. Este artículo utiliza la etiqueta de lona y JavaScript para dibujar un efecto de botón de reproducción de gradiente de cuatro colores. La imagen del efecto:
Código de implementación:
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> Draw Botton </title>
</ablo>
<Body>
<Vas> su navegador no admite lienzo, ¡actualice su navegador! </able>
<script type = "text/javaScript">
var canvas = document.getElementById ('mycanvas');/*Obtenga el lienzo definido*/
var ctx = Canvas.getContext ('2d');/*dibujar en un entorno bidimensional*/
DrawplayButton (CTX, 200,200);
DrawplayButton (CTX, 400,200);
DrawplayButton (CTX, 300,200);
función drawplayButton (_context, x, y) {
var nradius = 30; // radio
_context.save ();
_context.translate (x, y);
// Cambio de línea de construcción
var YellowGrad = _Context.CreateLineAarGradient (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); // girar por giro
redgrad.addcolorstop (0, '#d0372f');
RedGrad.AddColorStop (0.5, '#E0675E');
redgrad.addcolorstop (1, '#ce392d');
var greenGrad = _context.CreateLineArGradient (30,0,0,30); // girar por giro
Greengrad.addcolorStop (0, '#059700');
Greengrad.addcolorStop (0.5, '#02E003');
Greengrad.addcolorStop (1, '#019a02');
// Dibuja el ángulo de dos arcos
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);
// color círculo interno
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, '#eaedfc');
_context.save ();
_context.beginpath (); // círculo interior
_context.fillstyle = lingrad;
_context.arc (0,0, nradius-10,0, math.pi*2, true);
_context.fill ();
_Context.ClosePath ();
_context.restore ();
// dibujar triángulo
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 ();
}
// Dibuja un ventilador
function DrawCake (_Context, _nroTateAngle, _FillColor, _nradius) {
_context.save ();
_context.beginpath ();
_Context.FillStyle = _FillColor;
_context.rotate (_nroTateAngle);
_context.moveto (_nradius-10,0);
_context.lineto (_nradius, 0); // dibuja una línea a la derecha
_context.arc (0,0, _nradius, 0, math.pi/2, falso);
_context.lineto (0, _nradius-10); // dibuja uno hacia arriba
_context.arc (0,0, _nradius-10, math.pi/2,0, true); // dibujar el arco interno en sentido antihorario
_context.fill ();
_Context.ClosePath ();
_context.restore ();
}
</script>
</body>
</html>