Comentário: HTML5 pode desenhar figuras de fundo gradiente e baixá -las automaticamente. A seguir, é apresentado uma etapa detalhada para todos. Amigos que gostam não devem perder.
drawbgline.html<! Doctype html>
<head>
<meta charset = "utf-8"/>
<título> html5 desenha uma imagem de fundo gradiente e baixar automaticamente </ititle>
</head>
<Body>
<Center>
<VASLE>/CANVAS>
</central>
<Cript>
// Etapa 1: Obtenha o objeto de tela
var c = document.getElementById ("c");
// Etapa 2: Obtenha o objeto de contexto do objeto de tela
var context = c.getContext ("2D");
/*
* Estes estão desenhando outros códigos gráficos
context.BeginPath ();
context.LineWidth = 10;
context.strokestyle = "vermelho";
context.moveto (50,50);
context.lineto (150,50);
context.stroke ();
context.ClosePath ();
//Context.Strokerect(220,50,50,50);
context.fillstyle = "azul";
context.fillRect (220,50,50,50);
context.BeginPath ();
Context.arc (150,150,50,0*Math.PI/180, -180*Math.pi/180, false);
context.lineto (150.150);
context.ClosePath ();
context.stroke ();
context.LineWidth = 1;
context.font = "50px Songyi";
context.FillText ("Brip", 0,220);
context.Save ();
context.Translate (50,50);
context.rotate (90*math.pi/180);
context.BeginPath ();
context.LineWidth = 10;
context.strokestyle = "vermelho";
context.moveto (0,0);
context.lineto (100,0);
context.stroke ();
context.ClosePath ();
context.restore ();
*/
var g = context.createlineargradiente (0,0,0,200);
g.addcolorstop (0, "90bfff");
g.addcolorstop (1, "branco");
context.fillstyle = g;
context.fillRect (0,0,1,200);
window.Location = c.todataurl ("imagem/jpeg"). substituir ("imagem/jpeg", "imagem/stream de octeto");
</script>
</body>