Comentario: HTML5 puede dibujar imágenes de fondo de gradiente y descargarlas automáticamente. El siguiente es un paso detallado para todos. Amigos a los que les gusta no deberían perderse.
Drawbgline.html<! Doctype html>
<Evista>
<meta charset = "utf-8"/>
<title> html5 dibuja una imagen de fondo de gradiente y descarga automáticamente </title>
</ablo>
<Body>
<centro>
<Canvas>/Canvas>
</Center>
<script>
// Paso 1: Obtenga el objeto de lienzo
var c = document.getElementById ("c");
// Paso 2: Obtenga el objeto de contexto del objeto Canvas
VAR context = c.getContext ("2d");
/*
* Estos están dibujando otros códigos gráficos
context.beginPath ();
context.linewidth = 10;
context.strokestyle = "rojo";
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, falso);
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 = "rojo";
context.moveto (0,0);
context.lineto (100,0);
context.stroke ();
context.ClosePath ();
context.restore ();
*/
var g = context.CreateLineArgradient (0,0,0,200);
G.AddColorStop (0, "90bfff");
g.addcolorstop (1, "blanco");
context.fillstyle = g;
context.fillrect (0,0,1,200);
Window.location = C.Todataurl ("Image/JPeg"). Reemplazar ("Image/JPeg", "Image/Octet-stream");
</script>
</body>