Languages

Menu
Sites
Language
Animation loop through folder images in html5 Canvas

hello guys.
I'm trying to have the canvas element on my app loop through a set of images within a folder like as gear watch designer animation part . I've figured out how to set the image on the canvas but im not sure how to do multiple images loop draw with 15fps. 
I'm trying is to get all images (25) to loop. anyone can help me to write a html5 script for play multiple images from folder ?

Thank you for your time

 

View Selected Answer
List

Responses

4 Replies
Marco Buettner

With some changes u can use this tutorial

http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

aMir Sirati

Hello Marco Buettner,

Thanks for your answer but the sample rendering an area of a single image on a given interval. i need loop through a set of images within a folder like as Samsung Gear Watch Designer animation part. i found same but all use 1 image sprite for make an animation loop. its not worked curectly for more than 100 frames. :(

Mark as answer
Nafisul Islam Kiron

This worked for me

<!DOCTYPE HTML>
<html>
         <head>
		<script>
		var counter = 1;
		setInterval(function(){
		var myCanvas = document.getElementById('myCanvas');
		var ctx = myCanvas.getContext('2d');
		var img = new Image;
		img.onload = function(){
		ctx.drawImage(img,0,0);
		};

		// I had 4 images in my folder so I checked with 4.
		if(counter == 4) counter = 1;
		
		// assuming that your image sequence is named 1.jpg, 2.jpg, 3.jpg ....
		img.src = counter + '.jpg';

		counter++;
		
		// I set the interval to 100 ms, increase or decrease as per your need.
		// If you don't want loop use clearTimeout()
		}, 100);
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="100" height="100"></canvas>
	</body>
</html>

 

aMir Sirati

Nafisul Islam Kiron br,  really thanks for your answer. i will be try with this code :X :X :X