Psst. EU dotace 85 % pro OSVČ a firmy lze nyní čerpat i na e-learning. Více informací
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij halloweenské akce 80% výuky zdarma!
Halloween BF

Bubliny v JavaScriptu

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Jedná se o jednoduchý efekt na plátně naprogramovaný v JavaScriptu. Pixely bublin změní svoji hodnotu, čímž dojde k zajímavému efektu. Pohyb je zajišťován pomocí jednoduchého posunu souřadnic X, Y a kontroly nárazu do stěn. Posun se vygeneruje náhodný. Díky tomu se bubliny nepohybují jen s úhlem 45°. Skript si sám načte obrázek a sám nastaví velikost plátna na velikost původního obrázku. Obrázek z DOMu odstraní, aby tam zůstalo jen plátno.


Galerie

Program byl vytvořen v roce 2014.

 

Stáhnout

Staženo 98x (173.16 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
JavaScript zdrojákoviště - Základní konstrukce jazyka
Program pro vás napsal Michal Žůrek - misaz
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity (1)

 

 

Komentáře

Avatar
alex
Člen
Avatar
alex:11.2.2015 21:11

Ahoj , dako nechapem tento kod

Buble.prototype.paint = function () {
        // vykreslení bubliny

        // kouzlo efektu spočívá v patternu
        ctx.fillStyle = ctx.createPattern(effectImg, "");

        // vykreslení tvaru
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size/2, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
}

ctx.fillStyle = ctx.createPat­tern(effectIm­g, ""); = ctx je canvas tag v HTML subore ktory ma rozmery obrazku , effectImg je vytvoreny canvas ktory ma tiez rozmery obrazku = tj to znamena ze sa prekryvaju?

Dalej tu vytvaras tie bublinky , ale efekt s imagedata si hadzal na effectImg ako to je potom s tym?

 
Odpovědět
11.2.2015 21:11
Avatar
Odpovídá na alex
Michal Žůrek - misaz:11.2.2015 21:31

ctx není canvas ale kontext plátna. effectImg je ten stejný obrázek (canvas), jako původní jen je teda přebarvený. Přebarvený se nastaví jako obrázková výplň a vykreslí se s touto obrázkovou výplní kruh. Canvac, kontext, kreslení kruhu a obrázková výplň se řeší v článcích

http://www.itnetwork.cz/…rial-obrazky
a
http://www.itnetwork.cz/…ingcontext2d

pro názornost doporučuji si třeba ty obrázky vložit do DOMu a podívat se co je na nich nakreslono.

document.body.appendChild(effectImg);
 
Odpovědět
11.2.2015 21:31
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
alex
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
alex:11.2.2015 23:14

uz chapem dik :P

 
Odpovědět
11.2.2015 23:14
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.