[HTML canvas createlineargradient createradialgradient] Canvas drawing gradient createlineargradient createradialgradient Way Instance Demo

<! DOCTYPE html>html,body {margin:0; padding:0;} HTML {background: #999; height:100%;} #can {background: #FFF; display:block; margin:75px auto; Border-radius:2px;}</style><script type= ' Text/javascript ' >    $( function(){        varCanvas = $ (' #can '). Get (0 ); varOcan = Canvas.getcontext (' 2d ' ); varIMG =NewImage ();/*new Picture Object*/img.src= './images/bg.jpg ';        Createlineargradient (); functioncreatelineargradient () {//var color = ocan.createlineargradient (0, 0, 500, 500);/* Linear gradient: Starting and ending position of the gradient * /            varcolor = ocan.createradialgradient (250, 250, 100, 250, 250, 300)/*inner circle coordinate and radius, outer circle coordinate and radius*/Color.addcolorstop (0, ' #333255 ');/*add a start and end color, parameter 1: Position (0,1), parameter 2: Color If you have more than one location, you can always add it.*/            //color.addcolorstop (0.2, ' #CDE6BA ');            //color.addcolorstop (0.5, ' #D33E59 ');            //color.addcolorstop (0.9, ' #985365 ');Color.addcolorstop (1, ' #6C9AE3 ' ); Ocan.fillstyle= color;/*Note: FillStyle Fill style This property not only can set the color but also can set the background picture*/Ocan.fillrect (0, 0, Canvas.width, canvas.height); }    } );</script>
[HTML canvas createlineargradient createradialgradient] Canvas drawing gradient createlineargradient createradialgradient Way Instance Demo