Join Lee Brimelow for an in-depth discussion in this video Working with states and transforms, part of HTML5 for Flash Developers.
So when we're using the drawing API to actually draw things to our Canvas element, we actually …have the ability to transform the drawing commands before we actually do them. …So in this example, I have my Canvas and I've set a fillStyle to blue, a strokeStyle to …black and set the lineWidth to 10. …So let's say that I wanted to actually draw a stroked rectangle, but I actually want to …translate it first, and translation means, I'm essentially moving where I'm going to start drawing.…
So I can call the translate method on my context and essentially move the paintbrush to a specific location. …I'm going to move it to 400 on the X and 100 on the Y. …Now I can also rotate the Canvas, or how I'm actually going to draw into the Canvas, by …calling the rotate method, so ctx.rotate. …And to this I actually pass in a value in radians. …So again, I can't use degrees here, so I'm going to say Math.PI/4 …and this is essentially going to rotate how I'm going to draw into the Canvas.…
So any elements the directly on the Canvas already are not going to be affected by this, …
Author
Released
6/5/2012- Understanding HTML5 browser support
- Creating class files and animation loops
- Comparing Canvas and BitmapData
- Drawing dynamic graphics
- Exploring DOM animation
- Understanding CSS3 design properties
- Using CSS animations and transforms
- Understanding WebGL
- Using Adobe Edge and the CreateJS library
Skill Level Beginner
Duration
Views
Related Courses
-
HTML5: Graphics and Animation with Canvas
with Joe Marini3h 7m Intermediate -
HTML5: Video and Audio
with Steve Heffernan2h 7m Intermediate -
HTML5: Web Forms
with Joe Marini1h 58m Beginner
-
Introduction
-
Welcome33s
-
Setting up your system3m 32s
-
-
1. Overview of HTML5
-
What is HTML5?5m 10s
-
Choosing HTML5 tooling2m 28s
-
-
2. Transitioning from ActionScript to JavaScript
-
Creating class files4m 39s
-
Creating animation loops6m 3s
-
3. The Canvas Element
-
Drawing dynamic graphics10m 30s
-
Drawing images6m 6s
-
Drawing sprite sheets9m 28s
-
Animating Canvas elements2m 45s
-
4. DOM Animation
-
Animating DOM elements7m 50s
-
5. Using CSS3
-
Overview of CSS34m 12s
-
Animating using transitions6m 22s
-
Using CSS animations5m 2s
-
Using 2D and 3D transforms6m 20s
-
-
6. Incorporating Audio and Video
-
Using the HTML5 video tag6m 57s
-
-
7. Incorporating 3D with WebGL
-
Overview of WebGL4m 19s
-
Getting started with three.js10m 42s
-
-
8. Useful Tools and Frameworks
-
Animating using Adobe Edge6m 39s
-
Using the CreateJS library7m 16s
-
-
Conclusion
- 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.
CancelTake 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.
Share this video
Embed this video
Video: Working with states and transforms