Join Joe Marini for an in-depth discussion in this video Using rotation, part of Learning HTML Canvas.
- [Instructor] The rotate transform causes…subsequent drawing operations to be rotated…by a given angle.…And remember, we're talking about radians here,…the canvas doesn't use degrees.…If you want to use degrees,…then you need to perform your own calculations…to convert them into radians.…It's also important to note that…rotation takes place around whatever…the current origin of the canvas is,…not the center of an object that you're about to draw.…If you want to rotate around an object's center,…or for that matter around any other point on the canvas,…you should use the translate transform we saw earlier…to move the origin to the object center,…or whatever point you want to rotate around.…
And then perform the rotation,…and then translate the origin back.…The rotate transform takes just one argument,…and that's the angle argument.…The angle argument specifies the amount to rotate…the drawing operations that come after…you set the rotation transform.…So let's try this out in some code.…And so here we are in the rotate start sample.…
- 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.