Удалено (больше нету)
 

Я удалил тему!

А зачем оно нужно если можно работать с png спрайтом? Фотошоп не умеет в APNG сохранять, без JavaScript не работает, в чем плюсы тогда, кому нужен этот формат?

Вы можете использовать движок для отображении анимации!
https://github.com/Solovei95/apngjng.../imagetools.js
var anim = new Animation();
anim.offsetX = 0;
anim.offsetY = 0;
anim.blend_op = 0;
anim.dispose_op = 0;
anim.delay = 1000;
anim.addFrame(element1);
anim.addFrame(element2);
anim.addFrame(element3);
anim.animate();

Это разные изображения? А со спрайтами как быть?

Ну и все таки зачем столько усилий для APNG?

Видимо человеку от безделья заняться нечем =)

Для спрайтов есть парсер!
https://github.com/Solovei95/apngjng.../imagetools.js

var big = new Image();
big.src = "image.jpg";
big.onload = function(){
var imgs = parseSprite(big,{
row:2,
cell:2,
width:100,
height:100,
sizeMode:0,
paddingLeft:0,
paddingTop:0
});
}

Режем:
Таблица 2х2, размер кусков 100х100, сдвиг таблицы 0х0

Так что тупо:
ctx.drawImage(imgs[0],0,0);
ctx.drawImage(imgs[1],100,0);
ctx.drawImage(imgs[2],0,100);
ctx.drawImage(imgs[3],100,100);

Все куски являются Canvas элементами, но их можно рисовать в drawImage.

Если сделать sizeMode:1 то размер кусков будет зависить от размера самой таблицы
Если sizeMode:0 то размер таблицы зависит от размера кусков

Так что пинаем!
Есть также функция для маски и конверта картинки:
imageMask(canvas,img_elem1,img_elem2);
convertImage(canvas,img_elem1);

По аналогии:

var big = new Image();
big.src = "image.jpg";
big.onload = function(){
var imgs = parseSprite(big,{
row:2,
cell:2,
width:100,
height:100,
sizeMode:0,
paddingLeft:0,
paddingTop:0
});

var anim = new Animation();
...
anim.addFrame(imgs[0]);
anim.addFrame(imgs[1]);
anim.addFrame(imgs[2]);
anim.addFrame(imgs[3]);
anim.animate();
}

"Норвежские биотлонисты"

Я вам расскажу один секрет!
Canvas это тот же IMG элемент. Только IMG имеет картинку с определенного URL аддреса, и ее нужно подгружать!
Canvas же напротив - его можно использовать без URL аддреса, не нужно подгружать!