I am having a bit of a problem with some uni work. I need to program a set of numbers to appear one after each other as an animation. This is the code I have so far:
<body>
<canvas id="canvas1" width="640" height="480" ></canvas>
<script type="text/javascript">
// turn the html5 canvas into something we can edit in javascript (call it myCanvas)...
var myCanvas = (document.getElementById("canvas1"));
// take a 2d context from the canvas (call it myContext)...
var myContext = (myCanvas.getContext("2d"));
// when we do drawing stuff, we do it to the context, not the canvas...
// myContext.strokeRect(0,0,640,480);
//myContext.fillText("hello world!", 20, 20);
var myImage = new Image();
myImage.src =
"I am not allowed to add URL's as a new user";
var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
ctx.drawImage(myImage,0,0,32,32,0,0,32,32);
ctx.drawImage(myImage,32,0,32,32,32,32,32,32);
ctx.drawImage(myImage,64,0,32,32,64,64,32,32);
ctx.drawImage(myImage,96,0,32,32,96,96,32,32);
ctx.drawImage(myImage,128,0,32,32,128,128,32,32);
ctx.drawImage(myImage,160,0,32,32,160,160,32,32);
ctx.drawImage(myImage,192,0,32,32,192,192,32,32);
ctx.drawImage(myImage,224,0,32,32,224,224,32,32);
</script>
</body>
The file contains the basic code I have so far that shows the numbers in different places. What I need is for each of the numbers to appear one by one like an animation. What do I need to do in terms of code? I tried looking on the web but I still can't work it out.
This is what I have been told:
You will need a variable to keep track of the current frame number.
You will need to update this variable on each function call.
You will need to reset this variable to 0 if it exceeds the maximum number of frames.
You will need to think about the mathematical relationship between the current frame number and the position of the top left corner of its section of the largerimage.
Secondly once I can do that I need to make the numbers move around the canvas:
What I have been told:
Declare a variable to keep track of the current position.
Update the position on each function call.
Check if the image has gone past the edge of the screen – if so, make it appear on the other side as if it were wrapping around.
Now modify your code to make the image move in the opposite direction.
Now modify your code so it moves up/down as well as left/right!
Any help will do.
Thanks
Dan
