Help with javascript - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Help with javascript

verminousdanverminousdan Posts: 1Member
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:








// 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);





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
Sign In or Register to comment.