Comentário: Este artigo apresenta principalmente o efeito dos quatro botões de reprodução de cores de gradiente desenhados usando a tela JavaScript e HTML5. Amigos que precisam podem se referir a ele.
<VAS> </lVAs> é uma nova tag que aparece no HTML5. Como todos os objetos DOM, ele possui suas próprias propriedades, métodos e eventos, incluindo métodos de desenho. JS pode chamá -lo para desenhar. Este artigo usa a tag de tela e o JavaScript para desenhar um efeito de botão de reprodução de gradiente de quatro cores. A imagem do efeito:
Código de implementação:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> Botão de desenhar </title>
</head>
<Body>
<Canvas> Seu navegador não suporta tela, atualize seu navegador! </canvas>
<script type = "text/javascript">
var canvas = document.getElementById ('mycanvas');/*Obtenha a tela definida*/
var ctx = Canvas.getContext ('2D');/*Desenhe em um ambiente bidimensional*/
DrawPlayButton (CTX, 200.200);
DrawPlayButton (CTX, 400.200);
DrawPlayButton (CTX, 300.200);
função drawplaybutton (_context, x, y) {
var nradius = 30; // raio
_Context.Save ();
_Context.Translate (x, y);
// Mudança da linha de construção
var YellowGrad = _Context.createlineargradiente (30,0,0,30);
YellowGrad.AddcolorStop (0, '#fccb02');
YellowGrad.Addcolorstop (0,5, '#fbf14d');
Yellowgrad.addcolorstop (1, '#ffcb02');
var bluegrad = _context.createlineargradiente (30,0,0,30);
bluegrad.addcolorstop (0, '#2A459C');
bluegrad.addcolorstop (0,5, '#0E7Adc');
bluegrad.addcolorstop (1, '#2a459e');
var Redgrad = _context.createlineargradiente (30,0,0,30); // girar por girar
Redgrad.addcolorstop (0, '#d0372f');
Redgrad.addcolorstop (0,5, '#e0675e');
Redgrad.addcolorstop (1, '#CE392D');
var Greengrad = _Context.Createlineargradiente (30,0,0,30); // Girar por girar
Greengrad.addcolorstop (0, '#059700');
Greengrad.addcolorstop (0,5, '#02E003');
Greengrad.addcolorstop (1, '#019A02');
// desenha o ângulo de dois 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);
// Cor do 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 interno
_context.fillstyle = lingrad;
_context.arc (0,0, nradius-10,0, math.pi*2, verdadeiro);
_context.fill ();
_Context.ClosePath ();
_context.restore ();
// Desenhe 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 ();
}
// Desenhe um ventilador
função drawcake (_context, _nrotateAngle, _fillcolor, _nradius) {
_Context.Save ();
_Context.BeginPath ();
_context.fillstyle = _fillColor;
_context.rotate (_nrotateAngle);
_context.moveto (_nradius-10,0);
_context.lineto (_nradius, 0); // desenha uma linha para a direita
_context.arc (0,0, _nradius, 0, Math.pi/2, false);
_context.lineto (0, _nradius-10); // Desenhe um para cima
_context.arc (0,0, _nradius-10, Math.pi/2,0, verdadeiro); // Desenhe o arco interno no sentido anti -horário
_context.fill ();
_Context.ClosePath ();
_context.restore ();
}
</script>
</body>
</html>