Kommentar: HTML5 kann Gradienten -Hintergrundbilder zeichnen und automatisch herunterladen. Das Folgende ist ein detaillierter Schritt für alle. Freunde, die es mögen, sollten es nicht vermissen.
Drawbgline.html<! DocType html>
<kopf>
<meta charset = "utf-8"/>
<titels> html5 zeichnet Gradienten Hintergrundbild und downloads automatisch </title>
</head>
<body>
<Center>
<Canvas>/canvas>
</center>
<Script>
// Schritt 1: Holen Sie sich das Canvas -Objekt
var c = document.getElementById ("c");
// Schritt 2: Holen Sie sich das Kontextobjekt des Canvas -Objekts
var context = C.GetContext ("2D");
/*
* Dies zeichnen andere Grafikcodes
context.beginPath ();
context.linewidth = 10;
context.strokestyle = "rot";
context.moveto (50,50);
context.lineto (150,50);
context.stroke ();
context.closepath ();
//context.strokerect(220,50,50,50);
context.fillStyle = "blau";
Context.FillRect (220,50,50,50);
context.beginPath ();
context.arc (150,150,50,0*math.pi/180, -180*math.pi/180, Falsch);
context.lineto (150,150);
context.closepath ();
context.stroke ();
context.linewidth = 1;
context.font = "50px Songyi";
context.FillText ("farb", 0,220);
context.save ();
context.translate (50,50);
context.rotate (90*math.pi/180);
context.beginPath ();
context.linewidth = 10;
context.strokestyle = "rot";
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, "weiß");
context.fillStyle = g;
context.FillRect (0,0,1.200);
window.location = c.todataurl ("Bild/jpeg"). Ersetzen ("Image/JPEG", "Image/Octett-Stream");
</script>
</body>