コメント：HTML5は、グラデーションの背景写真を描画し、自動的にダウンロードできます。以下は、誰にとっても詳細なステップです。それが好きな友達はそれを見逃すべきではありません。
drawbgline.html<！doctype html>
<head>
<Meta charset = "utf-8"/>
<Title> HTML5はグラデーションの背景画像を描画し、自動的にダウンロードします</title>
</head>
<body>
<center>
<canvas>/canvas>
</center>
<スクリプト>
//ステップ1：キャンバスオブジェクトを取得します
var c = document.getElementById（ "c"）;
//ステップ2：キャンバスオブジェクトのコンテキストオブジェクトを取得します
var context = c.getContext（ "2d"）;
/*
*これらは他のグラフィックコードを描画しています
context.beginpath（）;
Context.LineWidth = 10;
context.strokestyle = "red";
Context.Moveto（50,50）;
Context.lineto（150,50）;
context.stroke（）;
Context.ClosePath（）;
//context.strokerect(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.createLineargradient（0,0,0,200）;
G.AddColorStop（0、 "90bfff"）;
G.AddColorStop（1、 "White"）;
context.fillstyle = g;
Context.FillRect（0,0,1,200）;
window.location = c.todataurl（ "image/jpeg"）。
</script>
</body>