[JavaScript]canvas particle i opacity na tle innego obrazu Opcje

[uncuncunc]

Czy canvas ma możliwość odświeżania obrazu?

http://jsfiddle.net/jsexample/djPhG/1

Chciałbym aby nie było tego czarnego tła, tylko sam efekt ognia na tym tle.

Ten post edytował uncuncunc 1.11.2012, 14:41:20

[HgReed]

Przy każdej zmianie na canvasie wyczyść go całego. Potem narysuj tło i wrzuć ogień.

[uncuncunc]

Przy każdej zmianie na canvasie wyczyść go całego. Potem narysuj tło i wrzuć ogień.

Nie mogę, ponieważ tło z założenia ma być dynamiczne. A "czyszczenie" nic nie daje, powstaje zapętlenie i obraz nie znika a jest tylko dodawany.

[HgReed]

Canvas to *płótno* (z ang.), więc pomyśl - *nie da się* rysować 2 warstw na raz. Musisz rysować tło, potem efekty.

[uncuncunc]

Dlatego proszę o pomoc.
Czy jest możliwość w ogóle uzyskania takiego efektu ognia na tle przeźroczystym? "Tło" obecny obrazek nie wchodzi w grę sam w sobie, ponieważ może go w ogóle nie być, chodzi o sam efekt ognia, aby była możliwość np. jego przesuwania i żeby ogień był na każdym tle widoczny, bez znaczenia co będzie pod nim.

[HgReed]

To funkcja tego ognia dodaje czarną plamę. Musiałbyś "wyłuskać" sam ogień. Dużo roboty nie ma.

[uncuncunc]

To funkcja tego ognia dodaje czarną plamę. Musiałbyś "wyłuskać" sam ogień. Dużo roboty nie ma.

Tak jak pisałem, nie bardzo wiem jak http://jsfiddle.net/jsexample/djPhG/2/ tylko to mi przychodzi do głowy, ale ten sposób nie czyści obiektu i powstałe płomienie nakładają się jeden na drugi.

Jest jakaś opcja do "oczyszczenia" ?

[HgReed]

Myślałem, że sam na to wpadniesz, ale dobra. Możesz nałożyć na siebie 2 canvasy - 1 z tłem, 2 z efektami - i czyścić tylko jeden.

[uncuncunc]

Pisałem. Nie wiem jak go wyczyścić. Jaką opcją?

[HgReed]

Google -> canvas api sheet -> http://www.nihilogic.dk/labs/canvas_sheet/...Cheat_Sheet.png

Funkcja: clearRect()

[uncuncunc]

Dzięki. kombinuję dalej... jednak obojętnie gdzie bym go nie dodał (renderowanie) to obraz się nie zapętla.. http://jsfiddle.net/jsexample/djPhG/3/

[HgReed]

W skrócie:
- w HTML'u wszystko, co musisz zrobić to 2x canvas z id odpowiednio "game" i "fx" (na przykład)
- w JS'ie zrobić pętlę, która będzie rysowała tło w "game" (tło = obrazek) i ogień na "fx"
- pętla kończąc się, ma wyczyścić oba canvas'y

Wszystko.

[uncuncunc]

Tylko że tłem ma być cała strona, więc raczej jej w 2 canvas nie umieszczę.

[HgReed]

Oba canvasy na sobie (margin i padding 0) rozciągnięte na ekran (width i heigth 100%).

[uncuncunc]

Nie rozumiesz. Popatrz na to http://jsfiddle.net/jsexample/djPhG/4/ Jest tylko 1 canvas i chodzi o odświeżanie tego efektu i tylko to. To co jest pod nim może być dynamiczne, zmieniać się na tysiąc sposobów, a efekt ognia ma być efektem ognia, bez znaczenia na jakim tle się obecnie znajduje, czy jest to możliwe?

[HgReed]

Właśnie NIE jest, a ja podaję Ci sposób na to.

[uncuncunc]

To na cholerę wymyślono ten canvas jak nie można zrobić na nim prostego efektu? (IMG:style_emoticons/default/biggrin.gif)

Twój sposób nie zadziała, jak zrobię 2 obiekt canvas, to zablokuje tym samym możliwość klikania na stronie w linki i dostęp do treści.

[HgReed]

Temat skończony, ale... Możesz przekazywać event'y z warstwy fx do game.