The following properties control the way colors are used in the
shape:
fillStyle
,
fillColor1
,
fillColor2
,
fillStart
,
fillEnd
,
fillAngle
, and
fillTexture
.
The
fillStyle
property specifies the type of Paint object used to fill the shape.
The possible values are as listed:
fillStyle : “SOLID_COLOR”;
|
![]() |
fillStyle : “LINEAR_GRADIENT”;
|
![]() |
fillStyle : “RADIAL_GRADIENT”;
|
![]() |
fillStyle : “TEXTURE”;
|
![]() |
The
fillColor1
and
fillColor2
properties specify the colors used:
- In
SOLID_COLOR
mode, the shape is filled withfillColor1
. - In
LINEAR_GRADIENT
andRADIAL_GRADIENT
modes, the gradient starts withfillColor1
and ends withfillColor2
:fillStyle : “LINEAR_GRADIENT”;fillColor1 : “blue”;fillColor2 : “red”;fillStyle : “RADIAL_GRADIENT”;fillColor1 : “blue”;fillColor2 : “red”;
In
LINEAR_GRADIENT
and
RADIAL_GRADIENT
modes, the
fillStart
,
fillEnd
, and
fillAngle
properties define the geometry of the gradient. A gradient is
defined by two points called P1 and P2. The following figures
explain the meaning of the properties.
The following figure shows the geometry for
a linear gradient.
![Snapshot
showing a linear gradient from blue to red. Point P1 is located on
the bright blue line at the center of the blue fill color region.
It is shown as the fillStart point, 0,25 units from the left edge
of the figure. Point P2 is located on the bright red line in the center
of the red fill color region. It is shown as the fillEnd point, 0,75
units from the left edge of the figure. The fill angle is set to 30
degrees.](../../JViews_Diagrammer/usrextdiag/_media/grad_00316_default.gif)
Linear gradient
Note that the linear gradient is always in “reflect” mode, so the
colors go back and forth from
fillColor1
to
fillColor2
outside the (P1, P2) segment.
The following figure shows the geometry for
a radial gradient.
![Snapshot
showing a radial gradient from blue to red. Point P1 is located in
the bright blue center of the circle that constitutes the blue fill
color region. It is shown as the fillStart point, 0,25 units from
the left edge of the figure. Point P2 is located in the center of
the first red ring surrounding the blue fill color region. It is shown
as the fillEnd point, 0,75 units from the left edge of the figure.
The fill angle is set to 30 degrees.](../../JViews_Diagrammer/usrextdiag/_media/grad_00417_default.gif)
Radial gradient
The
fillTexture
property specifies the URL of an image file to use as a texture in
TEXTURE
mode.