<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Fill a gradient shape</title><Scriptsrc= "Js/modernizr.js"></Script></Head><Body><Scripttype= "Text/javascript">Window.addeventlistener ('Load', eventwindowloaded,false);functioneventwindowloaded () {Canvasapp ();}functionCanvassupport () {returnModernizr.canvas;}functionCanvasapp () {if(!Canvassupport ()) { return; }Else{ varThecanvas=document.getElementById ('Canvas') varContext=Thecanvas.getcontext ("2d")} drawscreen (); functionDrawscreen () {//the horizontal gradient value must remain at 0 varGR=Context.createlineargradient (0,0, -,0); //Add a color endpointGr.addcolorstop (0,'RGB (255,0,0)'); Gr.addcolorstop (.5,'RGB (0,255,0)'); Gr.addcolorstop (1,'RGB (0,0,255)'); //apply FillStyle to generate gradientsContext.fillstyle=GR; Context.fillrect (0,0, -, -); }}</Script><CanvasID= "Canvas"width= "$"Height= "$">your browser is unable to use canvas small white children's shoes; Your support is my greatest pleasure!! </Canvas></Body></HTML>
Creating a gradient fill on the canvas has two basic options: linear or radial. A linear gradient creates a fill pattern that is horizontal, vertical, or diagonal. Radial gradient self-centering shop wear a radial fill
HTML5 canvas fills a gradient shape