I am having trouble drawing an animation on a HTML 5 canvas inside a loop. I have created a javascript animation function/class that stores frames and duration information and provides a get function to getFrame()[returns image] sub-function to retrieve the relevant frame. This works perfectly fine so i haven't included the full script. If anyone wants or needs it i will send to you.
When i call the following code it displays the animation as intended.
canvas.drawImage(tile1a.getFrame(),50,60);
canvas.drawImage(tile1a.getFrame(),50,90);
canvas.drawImage(tile1a.getFrame(),50,120);
//etc
This isn't very efficient as i want to draw a lot of tiles is column so it would be better to use a for loop. Therefore i tried the following code but the page just keeps crashing.
for (i=1;i<=10;i++)
{
canvas.drawImage(tile1a.getFrame(),FIELD_WIDTH,i*30);
}
However, i then tried the following which worked:
var temp = tile1a.getFrame();
for (i=1;i<=10;i++)
{
canvas.drawImage(temp,FIELD_WIDTH,i*30);
}
So the problem is definitely something to with me calling getFrame() within the for loop. I recon it is probably something really stupid but i can't figure it out!
Any help is much appreciated. thanks Jason
I think I figured it out. The loop in your draw function is set up like this:
ReplyDeletefor (i=1; i<=10; i++) {
// ...
}
Notice that you didn't create the i variable with the var keyword! That means that it will be a global variable!
Now look at the loop in your getFrame function:
for (i=0; i<this.frames.length; i++) {
// ...
}
The i in that loop is also global...
Your getFrame function is making sure that i will always be reset to 4 (because you only have four frames in it)!
The quick fix is to add some vars:
// in the `draw` function, for example
for (var i = 1; i <= 10; i++) {
// ...
}