Previous: Web programming 4 Colors.
Let's move on to the real hackery - the code. We will use the code section to create some graphics.
We will use a library called Raphael.JS, which is great for drawing objects inside a web page.
The first thing to understand is the coordinates system. In this first example, we will create a canvas called r and then draw a system of axis() on it, to mark the coordinates:
|
The coordinate system is in pixels - an actual dot turned on or off on your screen. That's how we measure things here.
Notice that the starting point (0,0) is in the upper left corner and the coordinates extend to the right (X) and down (Y). Pretty much all graphics anywhere relies on coordinates, so this is one to hammer down.
Once you figure out where you want to draw them, drawing shapes is easy - here's a rectangle and a circle. Notice how you mention which colors they are:
|
You figured it out: the rectangle starts at (20,20) and it is 300 pixels wide and 200 pixels tall, so its other corner is at (320, 220), while the circle has the center at (100,100) and it is 50 pixels in radius.
Note that if we drew them in reverse order, the rectangle would cover the circle:
|
Notice that we have lines of code that do stuff. Each line of code creates something or draws something. For instance Raphael(0,0,320,220) creates the canvas we're painting on. But... how can we paint on it?
Look at this:
Raphael(0,0,340,240);
circle(100,100, 50).attr("fill", "blue");
How can we draw the circle on THAT particular canvas? Remember, computers are quite silly - they cannot figure out that you mean "Oh, that canvas"?
Each line here creates something, so we could certainly do this:
Raphael(0,0,320,220).circle(100,100, 50).attr("fill", "blue");
A-ha: ok, I create a canvas and then I ask it to create a circle... what about a triangle and a lot of other things? I would have this huge line...?
So, what you're allowed to do instead is to give things names and use them that way:
var r = Raphael(0,0,320,220); // r is now the canvas
r.circle(100,100, 50).attr("fill", "blue");
We create a canvas and name it r. Now, later in the program, we can talk to r and ask it to paint stuff, like a circle! These are called variables and are indicated by the keyword var.
Great - you're half way there, really: now you can write some programs. You learned about variables and functions.
Oh, did I say function? Yes, just like in math, all those things with brackets are called functions, including Raphael axis and circle. Some take numbers and some take strings, like attr.
So go on, play with this:
|
And a hard one: consult the Raphael documentation and give the circle a red perimeter and a blue interior. Hint: add another attribute called "stroke".
We keep using these three separate parts that make up a web page, but do you want to see how they come together? Use the Google Chrome browser and come back to this page. In the example above, click "Run" and then right-click in the middle of the results box and select "View Frame Source". That's it!.
Continue to Web programming 6 Building a House.