INTRODUCTION TO HTML 5 CANVAS (PART II)
In the last post we saw how canvas tag is used and
done some very basic things with it. This time we’ll be doing some more
interesting stuff. Last time we drawn a rectangle and a line to our canvas.
Having Fun with Loops
We can draw multiple object on our canvas at a time. This
can be done with help of loops or the setInterval () function. We can change
the coordinates of object and redraw it with the new coordinates . Here are
some examples,
We can also change x and y at the same time to draw an inclined pattern,
Try these out, also try to make different patterns of your
own wish.
Making Things Move
Okay so we can draw things on canvas, but that would be
boring if they would just sit there and don’t do anything. To make things move
on our canvas we can change the coordinates of them and redraw them with the
new coordinates while clearing the canvas with each iteration . Let’s
understand it with an example,
1 1) First draw a rectangle, but this time are going
to pass the parameters to the fillRect() function
using variables as done above.
2) Now,
make the coordinates change with every iteration like this,
3)Now
clear the canvas with each iteration like this Hurray!! Its moving
Here the object move in a path .These paths then can be controlled by condition checking the coordinates like this.
Here it will stop as it reaches the boundary of canvas and
won’t go outside the screen. The screen.width return the width of our canvas as we have
assigned it to the variable screen.
Thanks of giving your precious time……..
Comments
Post a Comment