HTML5 tutorial to achieve Photoshop gradient effect_html5 tutorial skills

Copy code

The code is as follows:

">http://ajax.googleapis.com/ajax/libs/jquery/1.7. 1/jquery.min.js">>

<script><br />$(document).ready(function(){<br />var c=document.getElementById("drawbox");<br />var draw=c.getContext("2d"); //Get a reference to the 2d content and call the drawing API <p>//Specify gradient block<br />var grd=draw.createLinearGradient(50,50,200,50); //Coordinates, length and width<br />grd.addColorStop(0,"black"); //Start point Color<br />grd.addColorStop(1,"green"); //End color <p>draw.fillStyle=grd; //Set as fill style<br />draw.fillRect(50,50,200,50); //Fill into the rectangle<br />})<br /></script>