Embedded Files
Basic principle / syntax: define two circles at gradient creation
Basic principle / syntax: define two circles at gradient creation
Radial gradients are for creating gradients that propagate/interpolate colors along circles instead of propagating/interpolating along a virtual line, like linear gradients.
Here is an example of a radial gradient that interpolates the colors of the rainbow:
The gradient is defined as follows:
var grd = context.createRadialGradient(150, 100, 30, 150, 100, 100);
grd.addColorStop(0, "red");
grd.addColorStop(0.17, "orange");
grd.addColorStop(0.33, "yellow");
grd.addColorStop(0.5, "green");
grd.addColorStop(0.666, "blue");
grd.addColorStop(1, "violet");
context.fillStyle = grd;
The method from the context object createRadialGradient(cx1, cy1, radius1, cx2, cy2, radius2) takes as the first three parameters the "starting" circle of the gradient, and as the three last parameters, the "ending circle".
In the above example, the gradients starts at a circle located at (150, 100), with a radius of 30, and propagates to a circle with the same center as the first (150, 100), but with a bigger radius of 100, as shown below:
We added color stops using a method similar to that used for linear gradients.
What happens if the circles are not located at the same place?
What happens if the circles are not located at the same place?
You get some nice effects; here we set the second circle's center 60 pixels to the right of the first circle's center (cx = 210 instead of 150):
grd = ctx.createRadialGradient(150, 100, 30, 210, 100, 100);
Here is the result:
What happens if the gradient is smaller or larger than the shapes we draw?
What happens if the gradient is smaller or larger than the shapes we draw?
A gradient is an invisible shape on the screen: the radial gradient is made of two circles: an inner and an outer circle. Between these two circles, colors are interpolated.
We call the "first color" the color defined for the inner circle, the "last color" the last color of the gradient, that corresponds to the outer circle:
The color inside the first circle will be the first color. In our example above, the first color is red: and the small circle of the gradient in our example is filled in red!
The color outside the outer circle will be the last color of the gradient - which is not interpolated. The last color in our example is purple, and it fills the rest of the filled rectangle area "after" the external circle of the gradient.
The colors between the two circles will be interpolated.
Page updated
Google Sites
Report abuse