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

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

А зачем оно нужно если можно работать с 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 аддреса, не нужно подгружать!

background-image использует URL аддрес, и не возможно использовать там Canvas элемент.

Для IMG нужно использовать свойство onload (и по возможности onerror).
Для Canvas не нужно использовать ни onload, ни onerror (тем более что их нету).

http://www.w3.org/TR/2dcontext/#images
Прошу почитать!
Там вы увидите:

Нам интересен другой секрет.

Фотошоп не умеет сохранять JNG.

Первое правило темы об APNG: не говорить об APNG :D

А причём здесь JNG?

JNG тоже здесь причем!
Я создал:
crossImage - создает элемент с APNG/JNG или других изображений как Canvas элемент.

Пример:

//JNG
var img = new CrossImage("image.jng",function(){
ctx.drawImage(img,0,0);
});
//APNG/PNG
var img2 = new CrossImage("image.png",function(){
ctx2.drawImage(img2,0,0);
});
//JPEG
var img3 = new CrossImage("image.jpg",function(){
ctx3.drawImage(img3,0,0);
});

JNG = JPEG Network Graphics
http://en.wikipedia.org/wiki/JNG

APNG = Animated PNG
http://en.wikipedia.org/wiki/APNG
(чтобы анимация работала, если вы используете crossimage, следует использовать setInverval)

Для CrossImage доступны следующие форматы:
APNG
PNG (статичный)
GIF (не анимированный)
JNG
JPG
И прочие поддерживаемые.

Прекрасно. И кому нужны эти форматы, если даже фотошоп их не поддерживает?

Я переписал код crossImage.
Теперь работает совсем подругому:

crossImage("clock.png",{
canvas:document.getElementById("canvas"),
onload:function(){
//On loaded Image
},
onrender:function(){
//on APNG render
},
onplay:function(){
//On Start APNG Animation
}
});

onrender и onplay сделан для APNG
остальные идут к любым картинкам.

Заменил onplay на onstart
Добавил onerror.

Теперь стало кроссоскриптово!