[wuut]

Mirki, jak używając JS bez dodatkowych bibliotek zrobić zapętlone tło w Canvas?

#html5 #html #javascript

[gammarish]

@wuut: SetInterval ?

[G.....n]

@wuut: Co to znaczy "zapętlone tło"?

[G.....n]

SetInterval ?

@gammarish: #!$%@?, serio?

[wuut]

@Ginden: http://bdadam.com/blog/panning-and-scrolling-background-images-using-the-canvas-element.html

ta druga animacja

[danoxide]

@gammarish: jak już to "requestAnimationFrame".
@wuut: możesz rozwinąć? :)

[wuut]

@danoxide: wyżej podałem linka, ale chodzi mi mniej więcej o to, by mając jeden obrazek, który przewija się do góry i w momencie gdy się kończy, zaczynał się ten sam od nowa - ciężko mi to wytłumaczyć :D

[Lapidarny]

@wuut: Chodzi Ci o efekt repeat z CSS ale poprzez canvas z js?

[wuut]

@Lapidarny: Dokładnie tak!

[G.....n]

@danoxide: Trywialne - robisz getImageData, copy, i przesuwasz pierwsze w pikseli na koniec, setImageData.

[wuut]

@Lapidarny: chociaż nie do końca, musi być animowany :D

[G.....n]

@wuut:
Przykładowa implementacja (kolejność argumentów z głowy):

 setInterval(function() {
 var q = ctx.getImageDate(0,0,width,height);
 var p = new Uint8ClampedArray([].concat([].slice.call(q, 0, width), [].slice.call(q, width+1)));
 ctx.setImageData(p, 0, 0, width, height);
 }, 100);

[Lapidarny]

@wuut: To ja już nie rozumiem ;-;
Możesz chociaż powiedzieć do czego Ci to?( ͡° ͜ʖ ͡°)

I czemu nie użyjesz CSS?

[wuut]

http://bdadam.com/blog/panning-and-scrolling-background-images-using-the-canvas-element.html

@Lapidarny: druga animacja, do gry

[wuut]

@Ginden: muszę to przeanalizować, ale dzięki kolego

[Lapidarny]

@wuut Coś takiego? http://cssdeck.com/labs/kzdubfsv/ (ʘ‿ʘ)

[wuut]

@Lapidarny: Dokładnie takie coś, ale wydaje mi się że tam są użyte dodatkowe biblioteki

[Lapidarny]

@wuut: No nie wiem, zobacz to się dowiesz :-)

[danoxide]

@wuut: to zwykła funkcja, która wykonuje samą siebie. window.requestAnimationFrame to tak naprawdę fallback, dzięki któremu mamy pewność, że funkcja zadziała na wszystkich przeglądarkach - równocześnie możemy użyć samego setInterval, ale z założenia do animacji ma służyć właśnie rAF. Dalej to tylko operacje na canvasie oraz obliczenia matematyczne, więc w sumie nic nadzwyczajnego :)

[wuut]

@danoxide: Dzięki wielkie kolego, sprawdzę to! :)

[k.....w]

@wuut: A może sam CSS będzie zadowalający?