CreateLinearGradient Method
Class THtml5Canvas2D
function CreateLinearGradient(x0, y0, x1, y1: Double): TCanvasLinearGradient;
The CreateLinearGradient method creates a linear gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc.
Tip:
Tip:
Use the
AddColorStop method to specify different colors, and where to position the colors in the gradient object.
Parameter Values
The x-coordinate of the start point of the gradient.
The y-coordinate of the start point of the gradient.
The x-coordinate of the end point of the gradient.
The y-coordinate of the end point of the gradient.
Examples:
Define a gradient (left to right) that goes from black to white, as the fill style for the rectangle:
var
Gradient: TCanvasLinearGradient;
Gradient := Canvas.CreateLinearGradient(0,0,150,0);
Gradient.AddColorStop(0,clBlack);
Gradient.AddColorStop(1,clWhite);
Canvas.FillStyle := Gradient;
Canvas.FillRect(0,0,150,100);
Define a gradient (top to bottom) as the fill style for the rectangle:
var
Gradient: TCanvasLinearGradient;
Gradient := m_Canvas.CreateLinearGradient(0,0,0,100);
Gradient.AddColorStop(0,clBlack);
Gradient.AddColorStop(1,clWhite);
Canvas.FillStyle := Gradient;
Canvas.FillRect(0,0,150,100);
Define a gradient that goes from black, to red, to white, as the fill style for the rectangle:
var
Gradient: TCanvasLinearGradient;
Gradient := Canvas.CreateLinearGradient(0,0,150,0);
Gradient.AddColorStop(0,clBlack);
Gradient.AddColorStop(0.5,clRed);
Gradient.AddColorStop(1,clWhite);
Canvas.FillStyle := Gradient;
Canvas.FillRect(0,0,150,100);