Gradients
IE[a] | Firefox | Safari | Chrome | Opera | iPhone | Android | |
|---|---|---|---|---|---|---|---|
Linear gradients | 7.0+ | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
Radial gradients | · | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
[a] Internet Explorer support requires the third-party explorercanvas library. | |||||||
Earlier in this chapter, you learned how to draw a rectangle filled with a solid color (see Simple Shapes), then a line stroked with a solid color (see Paths). But shapes and lines aren’t limited to solid colors. You can do all kinds of magic with gradients. Figure 4-8 shows an example.
The markup looks the same as any other canvas:
<canvas id="d" width="300" height="225"></canvas>
First, we need to find the <canvas> element and its drawing
context:
var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");
Figure 4-8. A left-to-right linear gradient
Once we have the drawing context, we can start to define a gradient. A gradient is a smooth transition between two or more colors. The canvas drawing context supports two types of gradients:
createLinearGradient(paints along a line fromx0,y0,x1,y1)(tox0,y0)(.x1,y1)createRadialGradient(paints along a cone between two circles. The first three parameters represent the starting circle, with originx0,y0,r0,x1,y1,r1)(and radiusx0,y0)r0. The last three parameters represent the ending circle, with origin(and radiusx1,y1)r1.
Let’s make a linear gradient. Gradients can be any size, but we’ll ...