Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Magnus Haukeland
Magnus Haukeland
38 Points

How to animate a windmill?

Hey guys

I'm working on a drawing with canvas. Its a javascript and in this drawing i have a windmill, which I want to add an animation to. I want the blades on the windmill to spin. Have any of you some tips about how i can do this?

3 Answers

MDN has a page on Basic animations for Canvas. Their examples include a few circular things with rotations, so probably a good place to start!

Magnus Haukeland
Magnus Haukeland
38 Points

I have seen this page before and have had a look at the code used in the clock-example. But I struggle to understand what the different codes does. Can anyone try to help me understand the different lines of codes?

That's a fairly large request to go line by line and explain what each does.

I'd suggest getting a copy of the code either on your own computer or in Workspaces, then keep removing or changing the code on each line to see what is different.

Also, compare the various examples and note down what is the same or similar and what is different.

There are also a number of tutorials floating around on the web about HTML5 Canvas animation: