function () { var canvas = document.getElementById ("Canvas"), = Canvas.getcontext ("2d" ); var gradient =context.createlineargradient (100,100,100,200); Gradient.addcolorstop (1, "blue"); // show Blue at the bottom // Show Yellow on the top Context.fillstyle=gradient; Context.fillrect (100,100,100,100);};
Window.onload =function() { varCanvas = document.getElementById ("Canvas"), Context= Canvas.getcontext ("2d"); varGradient =context.createlineargradient (100,100,100,200); Gradient.addcolorstop (1, "blue");//Show Blue at the bottomGradient.addcolorstop (0.75, "pink");//Close to the bottomGradient.addcolorstop (0, "yellow");//Show Yellow on the topContext.fillstyle=gradient; Context.fillrect (100,100,100,100);};
Window.onload =function() { varCanvas = document.getElementById ("Canvas"), Context= Canvas.getcontext ("2d"); varGradient =context.createlineargradient (100,100,200,100); Gradient.addcolorstop (1, "blue");//Show Blue at the bottomGradient.addcolorstop (0.75, "pink");//Close to the bottomGradient.addcolorstop (0, "yellow");//Show Yellow on the topContext.fillstyle=gradient; Context.fillrect (100,100,100,100);};
----------------------------
function () { var canvas = document.getElementById ("Canvas"), = Canvas.getcontext ("2d" ); var gradient = context.createradialgradient (100,100,0,100,100,50); Gradient.addcolorstop (0, "white"); Gradient.addcolorstop (1, "Black"); = gradient; Context.beginpath (); Context.arc (100,100,50,0,math.pi * 2); Context.closepath (); Context.fill ();};
var gradient = context.createradialgradient (100,100,20,100,100,50);
var gradient = context.createradialgradient (100,100,20,100,100,80);
var gradient = context.createradialgradient (100,100,20,100,100,30);
var gradient = context.createradialgradient (120,80,0,110,90,60);
[Javascript] Gradient Fills on the HTML5 Canvas