февруари 6

Circles, Spirals and Sunflowers

An HTML5/canvas tutorial by Jim Bumgardner

In this tutorial, my aim is to show you some fun ways to draw circles, and spirals, and ultimately, how to draw the interesting pattern you see on sunflowers. All these techniques are described from a few basic facts about circles, which you probably learned (and forgot) a long time ago. Back in grade school, you may have learned these three equations:

D (diameter) = 2 R
C (circumference) = 2 π R (or π D)
A (area) = π R2
While these equations are useful, they aren’t actually needed to draw a circle. We’ll make use of them in a surprising way, below.

To draw a circle or anything, in Javascript, we need a graphics framework to work with. In this tutorial, I’m going to draw everything using the Canvas APIs which are part of HTML5. There is also a Processing.js version of this tutorial which you may prefer. Both versions use the HTML5 canvas – this means that if you are using an older web browser, like IE 8 or earlier, you’re not going to see anything!

All the examples I’m using make use of the same basic skeleton code, which sets up a simple canvas and draws in it using its device context. download this skeleton, here, and use it for your own experiments… Прочети цялата статия.

Категория: Canvas | Напиши коментар