HTML5 can draw gradient background images and automatically download them. The following describes the detailed steps. Do not miss drawBgLine.html.
The Code is as follows:
Html5 draws a gradient background image and automatically downloads it
Script
// Step 1: Get the canvas object
Var c = document. getElementById ("c ");
// Step 2: Obtain the context object of the canvas object
Var context = c. getContext ("2d ");
/*
* These are other graphic codes.
Context. beginPath ();
Context. lineWidth = 10;
Context. strokeStyle = "red ";
Context. moveTo (50, 50 );
Context. lineTo (150,50 );
Context. stroke ();
Context. closePath ();
// Context. strokeRect (, 50, 50 );
Context. fillStyle = "blue ";
Context. fillRect (, 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 ";
Context. fillText ("briup", 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, "90 BFFF ");
G. addColorStop (1, "white ");
Context. fillStyle = g;
Context. fillRect (0, 0, 1,200 );
Window. location = c. toDataURL ("image/jpeg"). replace ("image/jpeg", "image/octet-stream ");
Script