If you have a sprite image (image sequences that merged into one file) and you want to play it in your website, you can use this script.
Watch the video tutorial here:
And here is the script:
function createImloop(imagefile, wh, frms, spd){
document.getElementById("imloop").innerHTML = "<canvas id='canvas' width='" +wh+ "' height='" +wh+ "'></canvas>";
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.width = wh;
ctx.height = wh;
var image = new Image();
image.src = imagefile;
image.onload = function(){
var cFrame = 0;
setInterval(function(){
if(cFrame < frms-1) cFrame ++;
else cFrame = 0;
ctx.clearRect(0, 0, wh, wh);
ctx.drawImage(image, cFrame * wh, 0, wh, wh, 0, 0, wh, wh);
}, spd);
}
}
That one for JavaScript, and this one is for HTML:
<!DOCTYPE html>
<html>
<head>
<title>Imloop by Zofia Kreasi</title>
</head>
<body>
<div id="imloop"></div>
<script src="imloop.js"></script>
<script>
var newImage = new createImloop("spritestrip.png", 256, 6, 50);
</script>
</body>
</html>