Html5 tutorial implements gradient effect of Photoshop

Comments: Html5 tutorials enable the gradient effect of Photoshop. For details, refer.

The Code is as follows:
<! DOCTYPE html> <Meta charset = UTF-8>
<Title> HTML5 draw lines, circles, and rectangles </title>
<Script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script </a>
</Head>
<Script>
$ (Document). ready (function (){
Var c = document. getElementById ("drawbox ");
Var draw = c. getContext ("2d"); // obtain the reference of 2d content and call the drawing API </p> <p> // specify the gradient Block
Var grd = draw. createLinearGradient (50, 50, 50); // coordinates, length and width
Grd. addColorStop (0, "black"); // start color
Grd. addColorStop (1, "green"); // end color </p> <p> draw. fillStyle = grd; // set it to a fill Style
Draw. fillRect (50, 50, 50); // fill in the rectangle
})
</Script>
</Body>
<Canvas id = "drawbox" width = "500" height = "500"> </canvas>
</Body>
</Html>


: