Diskuze – Bubliny v JavaScriptu

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?

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);

uz chapem dik