You are previewing HTML5: Up and Running.

HTML5: Up and Running

Cover of HTML5: Up and Running by Mark Pilgrim Published by O'Reilly Media, Inc.
  1. HTML5: Up and Running
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Diving In
      2. Conventions Used in This Book
      3. Using Code Examples
      4. A Note on the Editions of This Book
      5. Safari® Books Online
      6. How to Contact Us
    3. 1. How Did We Get Here?
      1. Diving In
      2. MIME Types
      3. A Long Digression into How Standards Are Made
      4. An Unbroken Line
      5. A Timeline of HTML Development from 1997 to 2004
      6. Everything You Know About XHTML Is Wrong
      7. A Competing Vision
      8. What Working Group?
      9. Back to the W3C
      10. Postscript
      11. Further Reading
    4. 2. Detecting HTML5 Features
      1. Diving In
      2. Detection Techniques
      3. Modernizr: An HTML5 Detection Library
      4. Canvas
      5. Canvas Text
      6. Video
      7. Video Formats
      8. Local Storage
      9. Web Workers
      10. Offline Web Applications
      11. Geolocation
      12. Input Types
      13. Placeholder Text
      14. Form Autofocus
      15. Microdata
      16. Further Reading
    5. 3. What Does It All Mean?
      1. Diving In
      2. The Doctype
      3. The Root Element
      4. The <head> Element
      5. New Semantic Elements in HTML5
      6. A Long Digression into How Browsers Handle Unknown Elements
      7. Headers
      8. Articles
      9. Dates and Times
      10. Navigation
      11. Footers
      12. Further Reading
    6. 4. Let’s Call It a Draw(ing Surface)
      1. Diving In
      2. Simple Shapes
      3. Canvas Coordinates
      4. Paths
      5. Text
      6. Gradients
      7. Images
      8. What About IE?
      9. A Complete Example
      10. Further Reading
    7. 5. Video on the Web
      1. Diving In
      2. Video Containers
      3. Video Codecs
      4. Audio Codecs
      5. What Works on the Web
      6. Licensing Issues with H.264 Video
      7. Encoding Ogg Video with Firefogg
      8. Batch Encoding Ogg Video with ffmpeg2theora
      9. Encoding H.264 Video with HandBrake
      10. Batch Encoding H.264 Video with HandBrake
      11. Encoding WebM Video with ffmpeg
      12. At Last, the Markup
      13. What About IE?
      14. A Complete Example
      15. Further Reading
    8. 6. You Are Here (And So Is Everybody Else)
      1. Diving In
      2. The Geolocation API
      3. Show Me the Code
      4. Handling Errors
      5. Choices! I Demand Choices!
      6. What About IE?
      7. geo.js to the Rescue
      8. A Complete Example
      9. Further Reading
    9. 7. The Past, Present, and Future of Local Storage for Web Applications
      1. Diving In
      2. A Brief History of Local Storage Hacks Before HTML5
      3. Introducing HTML5 Storage
      4. Using HTML5 Storage
      5. HTML5 Storage in Action
      6. Beyond Named Key/Value Pairs: Competing Visions
      7. Further Reading
    10. 8. Let’s Take This Offline
      1. Diving In
      2. The Cache Manifest
      3. The Flow of Events
      4. The Fine Art of Debugging, a.k.a. “Kill Me! Kill Me Now!”
      5. Let’s Build One!
      6. Further Reading
    11. 9. A Form of Madness
      1. Diving In
      2. Placeholder Text
      3. Autofocus Fields
      4. Email Addresses
      5. Web Addresses
      6. Numbers As Spinboxes
      7. Numbers As Sliders
      8. Date Pickers
      9. Search Boxes
      10. Color Pickers
      11. And One More Thing...
      12. Further Reading
    12. 10. “Distributed,” “Extensibility,” and Other Fancy Words
      1. Diving In
      2. What Is Microdata?
      3. The Microdata Data Model
      4. Marking Up People
      5. Marking Up Organizations
      6. Marking Up Events
      7. Marking Up Reviews
      8. Further Reading
    13. A. The All-in-One Almost-Alphabetical Guide to Detecting Everything
      1. List of Elements
      2. Further Reading
    14. Index
    15. About the Author
    16. Colophon
    17. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

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");
A left-to-right linear gradient

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(x0, y0, x1, y1) paints along a line from (x0, y0) to (x1, y1).

  • createRadialGradient(x0, y0, r0, x1, y1, r1) paints along a cone between two circles. The first three parameters represent the starting circle, with origin (x0, y0) and radius r0. The last three parameters represent the ending circle, with origin (x1, y1) and radius r1.

Let’s make a linear gradient. Gradients can be any size, but we’ll make this gradient 300 pixels wide, like the canvas:

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

Because the y values (the second and fourth parameters) are both 0, this gradient will shade evenly from left to right.

Once we have a gradient object, we can define the gradient’s colors. A gradient has two or more color stops. Color stops can be anywhere along the gradient. To add a color stop, you need to specify its position along the gradient. Gradient positions can be anywhere between 0 and 1.

Let’s define a gradient that shades from black to white:

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

Defining a gradient doesn’t draw anything on the canvas. It’s just an object tucked away in memory somewhere. To draw a gradient, you set your fillStyle to the gradient and draw a shape, like a rectangle or a line:

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Figure 4-9 shows the result.

A left-to-right linear gradient

Figure 4-9. A left-to-right linear gradient

Suppose you want a gradient that shades from top to bottom. When you create the gradient object, keep the x values (the first and third parameters) constant, and make the y values (the second and fourth parameters) range from 0 to the height of the canvas:

var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Figure 4-10 shows the result.

A top-to-bottom linear gradient

Figure 4-10. A top-to-bottom linear gradient

You can also create gradients along a diagonal. For example:

var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Figure 4-11 shows the result.

A diagonal linear gradient

Figure 4-11. A diagonal linear gradient

The best content for your career. Discover unlimited learning on demand for around $1/day.