<!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>Curved stroke Gradient</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 () {varGR=Context.createradialgradient ( -, -, -, -, -, -); //Add a color endpointGr.addcolorstop (0,'RGB (255,0,0)'); Gr.addcolorstop (.5,'RGB (0,255,0)'); Gr.addcolorstop (1,'RGB (255,0,0)'); //apply FillStyle to generate gradientsContext.strokestyle=GR;Context.arc ( -, -, -, (Math.PI/(Math.PI) *0,/ the)* the,false); Context.stroke (); }}</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>
HTML5 Canvas Curved Stroke Gradient