getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
// Large circle - 90% transparency
context.fillStyle = ???rgba(13,44,50, 0.9)???;
context.beginPath();
context.arc(95,90,60,0, 2*pi, 0);
context.fill();
// Smaller circle - 30% transparency
context.fillStyle = ???rgba(0,0,255, 0.3)???;
context.beginPath();
context.arc(135,120,40,0, 2*pi, 0);
context.fill();
}
Figure 6-8 shows the two colored, semitransparent circles. Alternatively, you can set the context
.globalAlpha property to set a default transparency value for all stroke or fill styles. Once again,
value should be a float number between 0.0 and 1.0.
Adding Gradients
You can create both linear and radial gradients by using the following methods of the context object:
??‘ createLinerGradient(x1,y1,x2,y2) creates a gradient from the starting point (x1,y1) to the
end point (x2,y2).
??‘ createRadialGradient(x1,y1,r1,x2,y2,r2) creates a gradient circle. The first circle is
based on the x1, y1, and r1 values and the second circle based on the x2, y2, and r2 values.
Both of these methods return a canvasGradient object that can have colors assigned to it with the
addColorStop(position, color) method. The position argument is a float number between 0.
Pages:
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167