Join Joe Marini for an in-depth discussion in this video Using gradients, part of Learning HTML Canvas.
- [Instructor] Along with shadows and patterns…you can create gradients using the campus API.…So there are two kinds of gradients: linear and radial.…To create a gradient there are two steps involved.…First, you use the appropriate function…to create a gradient of a specific type,…either linear or radial…and then once you've created the gradient,…you have to add color stops to the gradient…at certain positions…in order to create the color transitions.…The finished gradient can be used anywhere.…A stroke or fill style can be used…pretty much like the patterns we saw earlier.…
So let's at how the different types of gradients are defined…so linear gradients are defined along a path.…There are two points that define a linear gradient.…The linear gradient then travels along that path…from the first point to the second point.…So in this example we have a gradient defined…by the starting point x0 and y0…and the ending point x1 and y1…and in this case we've got a light green color traveling…along that line to the lower right point…
- Canvas examples
- Drawing shapes, arcs, paths, and curves
- Drawing text
- Drawing shadows, patterns, and gradients
- Using clipping paths
- Displaying images and video
- Transforming objects with scaling and rotation
- Manipulating raw pixels
- Applying transitions
- Creating animations
Skill Level Intermediate
1. Overview of Canvas
2. Basic Canvas Drawing Techniques
3. Complex Canvas Drawing
4. Advanced Drawing APIs
5. Practical Examples
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.