HTML and CSS Reference
In-Depth Information
This may all seem pretty simple, but its actually quite powerful. You can now let the browser do all the hard work,
instead of bringing in large bitmap graphics that will incur longer load times for your end user. Keep in mind that if it's
a vector shape, you can more or less re-create it using the canvas element
Gradients
Another feature of the canvas element is its ability to use gradients. Gradients are useful for filling in shapes from
one color to another or building on multiple color values in a stack. Gradients are widely used in many things online.
For the longest time developers and designers created and repeated a 1-pixel-wide strip of the gradient using CSS.
Now, with native gradient support on the canvas element, the browser can again handle the heavy lifting. This is
exceptionally important to note when a client hands you Photoshop documents and you need to re-create an exact
representation in the browser while minimizing the k-weight. Instead of bringing in bitmaps from the PSD, tell the
canvas to handle it. It can be somewhat time-consuming, but the end result is worth the wait. Gradients can be Linear
or Radial or have multiple color stops between 0 and 1.
The main difference between a linear and a radial gradient is where the gradient begins. Figure 4-4 displays the
visual difference between them.
Figure 4-4. The difference between a linear and a radial gradient
Listing 4-6 makes a linear gradient fill for the star shape in Figure 4-3 .
Listing 4-6. A Linear Gradient Fill Using Canvas
<script>
//greenish gradient
var gradient=context.createLinearGradient(0,0,200,50);
gradient.addColorStop(0,"#FFFF00");
gradient.addColorStop(1,"#00FFFF");
context.save();
context.beginPath();
context.moveTo(92.0, 1.1);
context.lineTo(120.1, 58.1);
context.lineTo(183.0, 67.2);
context.lineTo(137.5, 111.5);
context.lineTo(148.2, 174.1);
context.lineTo(92.0, 144.6);
 
Search WWH ::




Custom Search