Commentaire: HTML5 peut dessiner des images d'arrière-plan de dégradé et les télécharger automatiquement. Ce qui suit est une étape détaillée pour tout le monde. Des amis qui l'aiment ne devraient pas le manquer.
drawbgline.html<! Doctype html>
<adal>
<meta charset = "utf-8" />
<Title> HTML5 dessine l'image de l'arrière-plan du gradient et télécharge automatiquement </Title>
</ head>
<body>
<Nenter>
<lebvas> / canvas>
</ Center>
<cript>
// Étape 1: Obtenez l'objet Canvas
var c = document.getElementById ("C");
// Étape 2: Obtenez l'objet de contexte de l'objet Canvas
var context = c.getContext ("2d");
/ *
* Ce sont des dessins d'autres codes graphiques
context.beginPath ();
context.linewidth = 10;
context.strokestyle = "Red";
context.moveto (50,50);
context.lineto (150,50);
context.stroke ();
context.closepath ();
//context.strokect(220,50,50,50);
context.fillStyle = "Blue";
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 = "Red";
context.moveto (0,0);
context.lineto (100,0);
context.stroke ();
context.closepath ();
context.Restore ();
* /
var g = context.CreateLlineargradient (0,0,0,200);
G.AddColOrStop (0, "90BFFF");
G.AddColorstop (1, "blanc");
context.fillStyle = g;
context.fillrect (0,0,1,200);
window.location = c.todataurl ("image / jpeg"). Remplace ("image / jpeg", "image / octtet-stream");
</cript>
</docy>