Linear gradient and radial gradient in HTML5

Linear gradient Code

functionShow () {varObj=document.getelementbyid ("Demo"); varContext=obj.getcontext ("2d"); varG=context.createlineargradient (0,0,0,300); //There is a gradual drip of the process;    //This is the same drip;    //This is our thread gradient;    //the color of the linear gradient is added to the drip.G.addcolorstop (0, ' Red '); G.addcolorstop (0.5, ' white '); G.addcolorstop (1, ' Red '); //a u7a, a gradient, or at least the same amount of color between two colors;    //I'm a-one;    //This is the linear gradient ID yes;    //g.addcolorstop (0.5, ' rgb (0,255,0) ');    //g.addcolorstop (1, ' RGB (0,0,255) ');Context.fillstyle=G; Context.fillrect (0,0,400,300); }

Effect:

Radial Gradient Code:

functionShow () {varObj=document.getelementbyid ("Demo"); varContext=obj.getcontext ("2d");    Context.beginpath (); varGrad=context.createradialgradient (70,70,20,70,70,70); //70,70,20 The small circle of the beginning, and then outward "gradient"    //to 70,70,70 "The end of the circle" so far drop ah;Grad.addcolorstop (0, ' red '); Grad.addcolorstop (0.5, ' white '); Grad.addcolorstop (1, ' Red '); Context.fillstyle=grad; Context.arc (70,70,70,0,math.pi*2);   Context.fill (); }

Effect:

What if we change it to a square?

Code: Context.rect (0,0,140,140);

Effect:

Actually very simple, is the TMD a gradient!

Linear gradient and radial gradient in HTML5