Comments: Bytes
The Code is as follows:
<! DOCTYPE html>
<Head>
<Meta charset = "UTF-8"/>
<Title> html5 draws a gradient background image and automatically downloads it </title>
</Head>
<Body>
<Center>
<Canvas id = "c" width = "1" height = "200"> </canvas>
</Center>
<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>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
